Como construir um layout de alvenaria usando CSS

O que é Layout de Alvenaria?

O layout de alvenaria é quando itens de tamanhos variados são dispostos para que não haja lacunas irregulares. Normalmente, quando os itens estão em uma visualização em grade, eles são alinhados em linha, coluna ou ambos. Mas em um layout de alvenaria, mesmo que haja um elemento mais curto em uma linha ou coluna, o próximo elemento ocupará o espaço.

Como conseguir o layout de alvenaria?

Há muitas maneiras de conseguir isso, mas uma das melhores é usar grid-template-columns e usar a função repeat() . Então vamos começar.

A propriedade grid-template-columns

Além do dimensionamento explícito da coluna, um dos aspectos mais valiosos e práticos do CSS Grid é a capacidade de repetir colunas até que sejam preenchidas e, em seguida, colocar itens automaticamente nelas. Em particular, a opção de especificar o número de colunas que queremos na grade e, em seguida, dar ao navegador o controle da capacidade de resposta dessas colunas resulta em menos colunas sendo exibidas em tamanhos de viewport menores e mais colunas sendo exibidas conforme a largura da tela aumenta.

Isso é obtido usando a função repeat() e as palavras-chave de posicionamento automático. Para resumir, a função repeat() nos permite repetir as colunas quantas vezes forem necessárias. Por exemplo, se estamos criando uma grade de 12 colunas, podemos escrever o seguinte:

 .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); }

Usando a diretiva 1fr , o navegador é instruído a dividir o espaço disponível entre as colunas para que cada uma receba uma parte igual. Ou seja, independente do tamanho, a grade neste exemplo sempre terá 12 colunas. No entanto, isso não é bom o suficiente porque o conteúdo ficará muito espremido em viewports menores.

Portanto, precisamos especificar uma largura mínima para as colunas, garantindo que elas não fiquem muito estreitas. Podemos fazer isso usando a função minmax() .

 grid-template-columns: repeat(12, minmax(300px, 1fr));

Mas devido ao modo como o CSS Grid funciona, a linha estourará. Estamos instruindo explicitamente o navegador a repetir as colunas 12 vezes por linha, portanto, mesmo que a largura da janela de visualização seja muito pequena para caber em todas elas com o novo requisito de largura mínima, a coluna não será agrupada em novas linhas.

Para obter o agrupamento, podemos usar as palavras-chave auto-fit ou auto-fill .

 grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

Ao usar essas palavras-chave, instruímos o navegador a cuidar do agrupamento de elementos e do dimensionamento de colunas para nós, fazendo com que os elementos que, de outra forma, transbordariam, fossem agrupados em linhas.

Esta é a aparência da grade agora:

Mas este não é o layout de alvenaria. Então, como alcançá-lo? Vamos ver.

As propriedades grid-column e grid-row

As propriedades grid-column e grid-row especificam o tamanho e a localização do item da grade em um layout de grade. Assim, podemos especificar a largura ou a altura de um único item de grade dentro da grade. E para fazer isso, podemos usar a palavra-chave span .

Para aumentar a largura do primeiro item da grade, podemos escrever:

 .grid-item: nth-child(1) { grid-column: span 2; grid-row: span 1; }

A primeira célula da grade, portanto, abrangerá duas colunas e terá a seguinte aparência:

Da mesma forma, se quisermos aumentar a altura do segundo item da grade, podemos escrever:

 .grid-item: nth-child(2) { grid-column: span 1; grid-row: span 2; }

A segunda célula da grade, portanto, abrangerá duas linhas e terá a seguinte aparência:

De maneira semelhante, se abrangermos todos os itens da grade da maneira desejada, obteremos o seguinte:

No entanto, se o número de itens da grade for excessivo, não será possível especificar uma altura e largura precisas para cada item da grade. Em vez disso, podemos atribuir os valores dinamicamente:

 .grid-item: nth-child(7n+1) { grid-column: span 2; grid-row: span 1; } .grid-item: nth-child(7n+2) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+4) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+5) { grid-column: span 3; grid-row: span 1; }

E aqui está a saída:

Mas isso é suficiente? Vamos levá-lo para o próximo nível, adicionando alguma perspectiva.

Podemos conseguir isso adicionando perspective() e usando a propriedade transform():

 .active { transform: perspective(18cm) rotate(20deg); transform-style: preserve-3d; transform-origin: left; }

Além disso, temos uma barra de menu que, quando selecionada, muda a grade de uma grade regular para uma com perspectiva. Podemos usar JavaScript para isso:

 menu.onclick=()=>{ grid.classList.toggle('active'); }

E a saída final é:

Gostou deste artigo? Deixe-me saber nos comentários abaixo!

Quer saber qual é a solução JavaScript mais versátil para visualização de dados? Leia aqui: https://techvariable.com/blogs/the-most-versatile-js-solution-to-data-visualization-d3-js/