Grade Piramidal Responsiva com CSS Grid

Índice

Introdução à Grade Piramidal

Ao contrário da grade hexagonal clássica, a grade piramidal apresenta um desafio único devido à sua estrutura. Neste artigo, exploraremos como criar uma grade piramidal responsiva utilizando CSS Grid, sem a necessidade de media queries ou JavaScript. A abordagem aqui apresentada é uma melhoria de uma técnica de cinco anos atrás, utilizando recursos modernos do CSS.

Para começar, é essencial entender a estrutura da grade piramidal. Cada item da grade é um hexágono, e a organização desses hexágonos forma a pirâmide. A grade é responsiva, o que significa que ela se adapta ao tamanho da tela do dispositivo.

A Configuração Inicial

Para criar a grade piramidal, começamos com um contêiner que utiliza CSS Grid. A estrutura do HTML é simples, com um contêiner e vários elementos filhos que representam os hexágonos.


<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
</div>

O CSS para o contêiner e os itens é o seguinte:


.container {
  --s: 40px; /* tamanho */
  --g: 5px; /* espaçamento */
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--s) var(--s));
  justify-content: center;
  gap: var(--g);
}

.container > * {
  grid-column-end: span 2;
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  margin-bottom: calc((2*var(--s) + var(--g))/(-4*cos(30deg)));
}

Observe que cada item ocupa duas colunas, o que é fundamental para a estrutura piramidal.

A Grade Piramidal

Para criar a grade piramidal, precisamos definir a posição de início da coluna para alguns itens. Isso é feito utilizando a propriedade `grid-column-start`. A lógica por trás disso envolve calcular a posição baseada no número de itens e na estrutura da pirâmide.

Uma abordagem inicial poderia envolver o uso de seletores `:nth-child` para definir a posição de cada item específico. No entanto, essa abordagem pode se tornar verbosa e inflexível.

Uma solução mais eficaz envolve o uso de uma fórmula matemática para calcular a posição da coluna com base no índice do item. Isso pode ser feito utilizando a função `sibling-index()` para obter o índice do item e, em seguida, aplicar a fórmula necessária.


.container > * {
  --_n: round(down,(100cqw + var(--g))/(2*(var(--s) + var(--g))));
  --_j: calc(sqrt(2*sibling-index() - 1.75) - .5);
  --_d: mod(var(--_j),1);
  grid-column-start: if(style(--_d: 0): calc(var(--_n) - var(--_j)););
}

Essa abordagem permite que a grade piramidal seja criada de forma responsiva e eficiente, sem a necessidade de media queries ou JavaScript.

Ao combinar a lógica para a grade piramidal com a lógica para a grade responsiva, podemos criar uma solução que se adapte às necessidades de diferentes tamanhos de tela.


.container > * {
  --_n: round(down,(100cqw + var(--g))/(2*(var(--s) + var(--g))));
  --_j: calc(sqrt(2*sibling-index() - 1.75) - .5);
  --_d: mod(var(--_j),1);
  --_i: calc((sibling-index() - 2 + (var(--_n)*(3 - var(--_n)))/2)/(2*var(--_n) - 1));
  --_c: mod(var(--_i),1);
  grid-column-start: 
    if(style((--_i > 0) and (--_c: 0)): 2; 
    style(--_d: 0): calc(var(--_n) - var(--_j)););
}

Essa solução demonstra como é possível criar uma grade piramidal responsiva utilizando apenas CSS, aproveitando os recursos modernos do CSS Grid e as funções matemáticas para calcular as posições dos itens.

Referência técnica: css-tricks.com. Curadoria e Insights: Redação Developers.