O Chromium chega à lacuna do Flexbox

A propriedade CSS gap está aqui para os mecanismos de layout Flexbox e de várias colunas do CSS do Chromium.

Adam Argyle

David Grogan

Lacuna de CSS

Termo-chave : gap é o espaçamento entre crianças. Talvez você já tenha ouvido falar desse tipo de espaçamento como "calhas" ou "ruas". É o espaço apenas onde as bordas da caixa de filhos se tocam.

gap é relativo ao fluxo, ou seja, muda dinamicamente com base na direção do fluxo de conteúdo. Por exemplo, gap se ajusta automaticamente aos diferentes valores de writing-mode ou direction que você define para seus usuários internacionais. Isso facilita muito o trabalho de espaçamento para o autor do componente e do CSS. Menos escalonamento de código.

Lacuna que demonstra suporte à localização, já que lida com mudanças na direção e no modo de escrita: Codepen | Tweet

Compatibilidade com navegadores

Browser Support

• 57
• 16
• 52
• 10.1

Source

Uso

gap aceita qualquer comprimento ou porcentagem CSS como valor.

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}

O gap pode ser transmitido com um comprimento, que será usado para linha e coluna.

Abreviatura

.grid {
  display: grid;
  gap: 10px;
}

Defina linhas e colunas juntas de uma só vez

Aberto

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}

O gap pode receber dois comprimentos, que serão usados para linha e coluna.

Abreviatura

.grid {
  display: grid;
  gap: 10px 5%;
}

Definir linhas e colunas separadamente de uma só vez

Aberto

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

Antes de gap estar no Flexbox, as estratégias envolviam margens negativas, seletores complexos, :last ou seletores de pseudoclasse do tipo :first ou outros meios para gerenciar o espaço de um conjunto de filhos dinamicamente dispostos e encapsulados.

Tentativas anteriores

Estes são padrões que as pessoas usam para ter um espaçamento semelhante a uma lacuna.

pseudoclasses

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

coruja lobotomizada

.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}

Fonte

No entanto, os itens acima não substituem totalmente gap e geralmente precisam de ajustes de @media ou :lang() para considerar cenários de quebra de texto, modos de escrita ou direção. Adicionar uma ou duas media queries não parece tão ruim, mas elas podem se acumular e levar a uma lógica de layout complicada.

O que o autor acima realmente queria era que nenhum dos itens filhos se tocasse.

O antídoto: lacuna

.layout {
  display: flex;
  gap: 10px;
}

Observação : a propriedade do espaçamento muda do filho para o pai.

Nos dois primeiros exemplos (sem Flexbox gap), os filhos são segmentados e recebem espaçamento de outros elementos. No exemplo de lacuna de antídoto, o contêiner é proprietário do espaçamento. Cada criança pode se livrar do fardo, além de centralizar a propriedade do espaçamento. Simplificando a consistência. Reordene, mude viewports, remova elementos, adicione novos elementos etc. e o espaçamento permanece consistente. Sem novos seletores, sem novas consultas de mídia, apenas espaço.

Atualizações do Chromium DevTools

Com essas atualizações, há mudanças no Chromium DevTools. Observe como o painel Estilos processa grid-gap e gap agora 👍

As ferramentas de desenvolvimento mostram grid-gap e gap, com gap usado abaixo de grid-gap para permitir que a cascata use a sintaxe mais recente.

O DevTools oferece suporte a grid-gap e gap porque gap é essencialmente um alias para as sintaxes anteriores.

Potencial de novo layout

Com o Flexbox gap, temos mais do que conveniência. Desbloqueamos layouts intrínsecos poderosos e perfeitamente espaçados. No vídeo e no exemplo de código abaixo, o Grid não consegue alcançar o layout que o Flexbox consegue. A grade precisa ter linhas e colunas iguais, mesmo que sejam atribuídas intrinsecamente.

Tweet

Além disso, observe como o espaçamento entre os filhos é dinâmico quando eles são encapsulados intrinsecamente dessa forma. As media queries não conseguem detectar esse tipo de quebra para fazer ajustes inteligentes. O Flexbox gap pode e vai fazer isso por você em todas as internacionalizações.

gap de várias colunas

Além de o Flexbox ser compatível com a sintaxe gap, os layouts de várias colunas também aceitam a sintaxe mais curta gap.

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

Muito legal.