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   e usar a função   . Então vamos começar. grid-template-columns repeat()       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   nos permite repetir as colunas quantas vezes forem necessárias. Por exemplo, se estamos criando uma grade de 12 colunas, podemos escrever o seguinte: repeat()   .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); }  Usando a diretiva   , 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. 1fr  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   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. o CSS  Para obter o agrupamento, podemos usar as palavras-chave   ou   . auto-fit 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.    propriedades   e  As grid-column grid-row  As propriedades   e   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   . grid-column grid-row 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 é:    Deixe-me saber nos comentários abaixo! Gostou deste artigo?     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/

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Este áudio é produzido no idioma original da história!

Como construir um layout de alvenaria usando CSS

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps