Guia rápido para colunas de modelo de grade em Tailwind CSS
As colunas do modelo de grade são uma parte fundamental do sistema de grade Tailwind CSS, fornecendo uma maneira de definir as colunas de uma grade e controlar sua largura e posicionamento.
O tópico de discussão neste artigo é a classe utilitária de colunas de modelo de grade no Tailwind CSS com exemplos .
Colunas de modelo de grade
Esta é uma classe utilitária que permite definir o tamanho e o número de colunas em um contêiner de grade.
A classe Grid Template Columns funciona especificando um ou mais valores que serão aplicados às colunas da grade.
Com colunas de modelo de grade, você pode criar um layout de grade flexível e responsivo a diferentes tamanhos de tela e tipos de dispositivos.
Classes de Colunas de Modelo de Grade
As colunas do modelo de grade são definidas usando uma série de classes predefinidas que controlam a largura e o posicionamento das colunas.
Essas classes permitem que você aplique o tamanho e a posição das colunas de maneira rápida e fácil, sem precisar escrever CSS personalizado.
As classes são baseadas em um sistema de grade de 12 colunas mencionado na tabela abaixo:
| Aulas | Visão geral |
| grid-cols-1 | Essa classe define o contêiner de grade para ter apenas uma coluna. |
| grid-cols-2 | Usando esta classe, duas colunas serão exibidas no contêiner da grade. |
| grid-cols-3 | Usando esta classe, o contêiner da grade terá três colunas. |
| grid-cols-4 | Existem quatro colunas no contêiner da grade quando esta classe é aplicada. |
| grid-cols-5 | Um contêiner de grade com cinco colunas é criado por esta classe. |
| grid-cols-6 | Os contêineres de grade são configurados para ter seis colunas por esta classe. |
| grid-cols-7 | Essa classe define contêineres de grade para ter sete colunas. |
| grid-cols-8 | Esta classe especifica oito colunas para contêineres de grade. |
| grid-cols-9 | Um contêiner de grade com esta classe tem nove colunas. |
| grid-cols-10 | Como resultado dessa classe, os contêineres de grade têm dez colunas. |
| grid-cols-11 | Esta classe define um contêiner de grade para ter onze colunas. |
| grid-cols-12 | Usando esta classe, os contêineres de grade terão doze colunas. |
| grid-cols-none | Ele é usado para remover a propriedade grid-template-columns de um elemento, tornando-o efetivamente uma grade de coluna única. Útil quando queremos criar uma grade que não seja baseada em colunas, mas sim em linhas ou alguma outra dimensão. |
Sintaxe
<element class="grid grid-cols-number"> </element>
O exemplo a seguir mostra a implementação das classes grid-cols-3 e grid-cols-4 no Tailwind:
