Linhas de modelo de grade em CSS Tailwind
Neste artigo, examinaremos a propriedade de linhas do modelo de grade no Tailwind CSS, incluindo sua sintaxe, classes e exemplos práticos .
A classe utilitária grid-rows no Tailwind CSS é usada para definir o número de linhas para uma grade CSS.
O número de linhas é definido pelo número definido na classe. Por padrão, a classe grid-row criará um número fixo de linhas, o que significa que, se você tiver mais itens do que linhas, os itens em excesso transbordarão.
Sintaxe
A sintaxe da propriedade de linhas do modelo de grade é a seguinte:
<element class="grid grid-rows-number"> </element>
Classes de Linhas de Modelo de Grade
| Aulas | Visão geral |
| grid-rows-1 | Esta classe define o número de linhas em um contêiner de grade como 1. |
| grid-rows-2 | Os contêineres de grade que usam essa classe consistem em duas linhas. |
| grid-rows-3 | Um contêiner de grade com três linhas é definido usando esta classe. |
| grid-rows-4 | Usando esta classe, você pode criar contêineres de grade com quatro linhas. |
| grid-rows-5 | Os contêineres de grade que usam essa classe são compostos por cinco linhas. |
| grid-rows-6 | Um contêiner de grade usando esta classe poderá conter seis linhas. |
| grade-linhas-nenhuma | Como o nome sugere, esta classe é usada para remover a definição explícita de linhas de grade de um elemento. Como resultado, ocupa toda a altura do contêiner. |
Vamos explorar o funcionamento das classes grid-rows-2 e grid-rows-3 no Tailwind usando um exemplo:
Example:
Example:
Conclusão
A propriedade de linhas do modelo de grade no Tailwind CSS fornece uma ferramenta poderosa para criar layouts de grade responsivos e personalizáveis.
Com sua sintaxe intuitiva e variedade de classes de utilitários, você pode criar layouts de grade complexos de forma rápida e fácil.
Ao usar a propriedade de linhas do modelo de grade do Tailwind, você pode simplificar seu fluxo de trabalho e criar interfaces de usuário bonitas e responsivas com o mínimo de código CSS.
