O Chromium chega à lacuna do Flexbox

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

Adam Argyle

David Grogan

CSS Gap

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

Compatibilidade com navegadores

Uso

gap aceita qualquer length ou percentage CSS como valor.

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

O intervalo pode ser transmitido com 1 comprimento, que será usado para linha e coluna.

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

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

O intervalo pode receber duas medidas, que serão usadas para linha e coluna.

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

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

Flexbox gap

Antes que gap estivesse no Flexbox, as estratégias envolviam margens negativas, seletores complexos, :last ou seletores de pseudoclasse do tipo :first ou outras formas de gerenciar o espaço de um conjunto de filhos com layout e agrupamento dinâmico.

Tentativas anteriores

Confira abaixo os padrões que as pessoas usaram para criar espaços semelhantes a lacunas.

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

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

Os itens 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 quebra, modos de escrita ou direção. Adicionar uma ou duas consultas de mídia 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 pretendia era que nenhum dos itens filhos se tocasse.

The Antidote: gap

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

Nos dois primeiros exemplos (sem Flexbox gap), os filhos são direcionados e aplicados com espaçamento de outros elementos. No exemplo de lacuna do Antidote, o contêiner possui o espaçamento. Cada criança pode se livrar do fardo, além de centralizar a propriedade do espaçamento. Simplificar a consistência. Reordene, mude as viewports, remova elementos, anexe 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, o Chromium DevTools mudou. O painel Styles agora processa grid-gap e gap 👍

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

Novo layout

Com o Flexbox gap, oferecemos mais do que apenas conveniência. Nós desbloqueamos layouts intrínsecos 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 de forma intrínseca.

Além disso, observe como o espaçamento entre as crianças é dinâmico quando elas são agrupadas dessa forma. As consultas de mídia não podem detectar o ajuste dessa forma para fazer ajustes inteligentes. O Flexbox gap pode e vai fazer isso para você em todas as internacionalizações.

gap com várias colunas

Além do Flexbox oferecer suporte à sintaxe gap, os layouts de várias colunas também oferecem suporte à sintaxe gap mais curta.

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

Muito legal.