O Chromium chega à lacuna do Flexbox

A propriedade CSS gap está disponível para os mecanismos de layout de várias colunas e Flexbox em CSS do Chromium.

Adam Argyle

David Grogan

Lacuna do CSS

gap é relativo ao fluxo, o que significa que muda dinamicamente com base na direção do fluxo de conteúdo. Por exemplo, o gap será ajustado automaticamente para os diferentes valores de writing-mode ou direction definidos para usuários internacionais. Isso diminui significativamente a carga de desafios de espaçamento para o componente e o autor do CSS. Menor dimensionamento de código.

Compatibilidade com navegadores

Uso

gap aceita qualquer comprimento ou porcentagem de CSS como um valor.

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

A lacuna pode ter um comprimento de 1, que será usada para linha e coluna.

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

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

A lacuna pode ter dois comprimentos, que serão usados para linha e coluna.

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

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

Flexbox gap

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

Tentativas anteriores

A seguir estão os padrões que as pessoas usaram para obter espaçamento semelhante a lacunas.

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

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

No entanto, as instruções acima não são uma substituição completa para gap e geralmente precisam de ajustes de @media ou :lang() para considerar cenários de ajuste, modos de gravação ou direção. Adicionar uma ou duas consultas de mídia não parece tão ruim, mas elas podem aumentar e levar a uma lógica de layout complicada.

O que o autor acima pretendia era que nenhum dos itens secundários tivesse sido usado.

O antídoto: lacuna

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

Nos dois primeiros exemplos (sem o Flexbox gap), os filhos são direcionados e recebem espaçamento de outros elementos. No exemplo do intervalo do antídoto, o contêiner possui o espaçamento. Cada criança pode aliviar a carga e, ao mesmo tempo, centralizar a propriedade do espaçamento. Simplificar a consistência. Reordene, mude as janelas de visualização, remova elementos, anexe novos elementos etc., e o espaçamento permanece consistente. Sem novos seletores, sem novas consultas de mídia, somente espaço.

Atualizações do Chromium DevTools

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

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

Novo potencial de layout

Com o Flexbox gap, oferecemos mais do que conveniência. Desbloqueamos layouts intrínsecos, potenciais 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 oferecer. A grade precisa ter linhas e colunas iguais, mesmo que sejam intrinsecamente atribuídas.

Além disso, observe como o espaçamento entre filhos é dinâmico quando eles se unem intrinsecamente dessa forma. As consultas de mídia não detectam quebras como essa para fazer ajustes inteligentes. O Flexbox gap pode e vai fazer isso por você em todas as internacionalizações.

Várias colunas gap

Além do suporte ao Flexbox com a sintaxe gap, os layouts de várias colunas também são compatíveis com a sintaxe gap mais curta.

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

Muito legal.