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.

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

Muito longo; Para ler

Making security fun one episode at a time

Como construir um layout de alvenaria usando CSS

Muito longo; Para ler

Abhigyan

STORY’S CREDIBILITY

Code License

Guide

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

Como construir um layout de alvenaria usando CSS

Muito longo; Para ler

Abhigyan

STORY’S CREDIBILITY

Code License

Guide

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

HISTÓRIAS RELACIONADAS