Centralizar itens na primeira linha com CSS Grid

Imagine a seguinte seção em um site:

1. Uma coleção de elementos, como uma série de cartões com informações de marketing, são apresentados em uma grade.
2. Os elementos são organizados em fileiras de três.
3. Quando houver um número ímpar de elementos restantes, eles serão centralizados horizontalmente.

Existem algumas maneiras de estilizar esse layout. Controlling Leftover Grid Items with Pseudo-selectors por Michelle Barker compartilha uma solução de CSS Grid inteligente. Mas aqui vai uma reviravolta: E se o número ímpar centralizado de elementos aparecesse na primeira linha em vez da última?

Incluí uma demonstração do CodePen no final deste artigo, caso você queira pular para a frente. Caso contrário, continue em uma jornada de descoberta de estilo.

Pilhas de grade

É uma grade trapezoidal? Grade de tijolos? Grade piramidal? Pyragrid? Para o propósito deste artigo, acabei escolhendo um nome mais genérico, chamando-o de Grid Stack . Veja como construiremos uma Grid Stack que contém cinco cartas exibidas em uma grade de três colunas.

.grid-stack {
  display: grid;
  grid-template-columns: repeat(6, 1fr);

  > * {
    grid-column-end: span 2;
  }

  > :first-child {
    grid-column-start: 2;
  }
}

O aninhamento CSS está sendo usado aqui, que é suportado recentemente nos principais navegadores. Ainda não está se sentindo pronto para isso? Podemos mover as regras aninhadas para seus próprios conjuntos de regras de nível superior. Elas só precisam começar com o nome do seletor pai, ou seja,.grid-stack > * { }

O contêiner pai grid-stackproduz um modelo com seis colunas. Observe que a grid-template-columnscontagem de repetição é o dobro da quantidade de colunas que queremos visualmente presentes em cada linha. Cada elemento filho então se estenderá por duas colunas em vez de uma. Finalmente, o primeiro elemento filho é alinhado ao início da segunda coluna. O resultado é uma linha superior visualmente centralizada.

Variações

Até agora, os estilos que criamos só se aplicam quando há cinco cartas posicionadas em três colunas. Podemos querer variações diferentes dependendo dos nossos designs. Três cartas exibidas em duas colunas? Sete cartas em quatro? Vamos ajustar o conjunto de regras acima para utilizar uma variável CSS para a grid-template-columnscontagem de repetição. Lembre-se de que esse valor deve ser o dobro da quantidade de colunas esperadas.

.grid-stack {
  display: grid;
  grid-template-columns: repeat(calc(var(--columns) * 2), 1fr);

  > * {
    grid-column-end: span 2;
  }

  > :first-child {
    grid-column-start: 2;
  }
}

O --columnsvalor é dobrado conforme passa pela calc()função CSS. Agora podemos definir a quantidade preferida de colunas diretamente no contêiner pai.

<div class="grid-stack" style="--columns: 2"></div>
<div class="grid-stack" style="--columns: 3"></div>
<div class="grid-stack" style="--columns: 4"></div>

Demonstração

Bônus! Pilhas de pirâmide

Na demonstração acima, você pode ter descoberto algumas configurações para o Grid Stack que resultam em uma pilha em estilo pirâmide. Talvez agora possamos chamá-lo de pyragrid? Ainda não tenho certeza sobre isso… De qualquer forma, para atingir esse layout envolve alguns ingredientes extras. Precisaremos ajustar a grid-column-startposição do primeiro elemento em cada linha. Vamos pular direto para o último exemplo com o grid-stack-15seletor:

.grid-stack-15 {
  --columns: 5;

  > :first-child {
    grid-column-start: 5;
  }

  > :nth-child(2) {
    grid-column-start: 4;
  }

  > :nth-child(4) {
    grid-column-start: 3;
  }

  > :nth-child(7) {
    grid-column-start: 2;
  }
}

• Isso requer uma grade de cinco colunas visualmente, então define --columns: 5. Lembre-se de que esse valor é dobrado e gera um modelo de dez colunas.
• Nós cutucaremos o primeiro item em cada linha com grid-column-start. A posição inicial do elemento da linha superior é igual ao --columnvalor. Regras subsequentes diminuirão esse valor em 1.

Certamente é possível desenvolver uma função Sass ou PostCSS que possa gerar dinamicamente essa saída CSS, mas isso pareceu um pouco exagerado para a demonstração. Como bônus adicional, confira a resposta do Stack Overflow de Temani Afif que estiliza elementos em uma pirâmide usando floatand shape-outside. Muito legal!

Limitações

Cada variação de layout espera que um número ímpar específico de elementos filhos seja renderizado. Eu explorei maneiras de ajustar automaticamente o layout com base na contagem de elementos, mas havia muitos casos extremos a serem considerados. Isso criou mais problemas do que resolveu. Além disso, embora esses layouts funcionem bem em uma viewport mais ampla, eles podem não se sair tão bem onde há menos espaço disponível. Um mediaou containerconjunto de regras de consulta pode garantir que nosso conteúdo se adapte adequadamente, mas certamente não poderia ser um conjunto condicional de estilos de tamanho único.