Fluxo automático de grade no Tailwind Css
Este artigo tem como objetivo elaborar a propriedade de fluxo automático da grade do Tailwind com exemplos. O objetivo desta classe é controlar o posicionamento de itens de grade que não são explicitamente colocados por uma linha de grade ou coluna de grade.
É importante saber que quando usamos o fluxo automático da grade de vento para definir o posicionamento dos itens da grade, o contêiner da grade calculará a quantidade de espaço disponível para a grade, bem como o tamanho de cada item da grade e, em seguida, colocará o itens de acordo.
Classes de Fluxo Automático da Grade Tailwind
| Aulas | Visão geral |
| grade-fluxo-linha | Essa classe de utilitário permite definir o posicionamento dos itens da grade para preencher as linhas da esquerda para a direita antes de passar para a próxima linha. |
| grid-flow-col | Os itens da grade são colocados de cima para baixo antes de passar para a próxima coluna. |
| grade-fluxo-denso | Quando essa classe é aplicada a um contêiner de grade, ela habilita o algoritmo de empacotamento denso para itens de grade. Isso permite que os itens da grade sejam colocados em células vazias, mesmo que isso crie buracos na grade. |
| grade-fluxo-linha-denso | Os itens da grade são compactados densamente usando o algoritmo de empacotamento denso e são colocados da esquerda para a direita antes de passar para a próxima linha. No Tailwind, a classe utilitária grid-flow-row-dense é uma combinação das classes grid-flow-row e grid-flow-dense. |
| grid-flow-col-dense | Os itens da grade são compactados densamente e colocados de cima para baixo antes de passar para a próxima coluna. Essa classe utilitária combina as classes grid-flow-col e grid-flow-dense no Tailwind. |
Tailwind Grid-flow-row
A classe grid-flow-row do Tailwind é usada para criar um layout de grade onde os itens fluem em linhas.
A classe grid-flow-row, por outro lado, organiza os itens em linhas, o que pode ser útil em determinadas situações, como quando você deseja criar uma lista rolável horizontal.
Sintaxe
<element class="grid-flow-row"> Contents... </element>
Este exemplo se concentra no uso da classe grid-flow-row no Tailwind:
Example:
Tailwind grid-flow-col
A classe grid-flow-col do Tailwind é usada para criar um layout de grade onde os itens fluem em colunas.
A classe grid-flow-col, por outro lado, organiza itens em colunas, que é o layout mais comum para grades.
Sintaxe
<element class="grid-flow-col"> Contents... </element>
Para este exemplo, vamos considerar a classe grid-flow-col no Tailwind:
Example:
Tailwind Grade-fluxo-denso
A classe grid-flow-dense é usada para criar um layout de grade onde os itens são organizados de maneira densa ou compacta.
Em alguns casos, você pode querer criar um layout de grade onde os itens são organizados juntos para reduzir o espaço em branco e criar um design mais compacto.
Sintaxe
<element class="grid-flow-dense"> Contents... </element>
Neste exemplo, vamos usar a classe grid-flow-dense no Tailwind:
Example:
Tailwind Grid-flow-row-dense
A classe grid-flow-row-dense é usada para criar um layout de grade onde os itens são organizados de maneira densa ou compacta e fluem em linhas.
Sintaxe
<element class="grid-flow-row-dense"> Contents... </element>
Este exemplo retrata a aplicação da classe grid-flow-row-dense no Tailwind:
Example:
Tailwind grid-flow-col-dense
A classe tailwind grid-flow-col-dense é usada para criar um layout de grade onde os itens são organizados de maneira densa ou compacta e fluem em colunas.
Sintaxe
<element class="grid-flow-col-dense"> Contents... </element>
O exemplo a seguir mostra a execução da classe grid-flow-col-dense no Tailwind:
