Guia rápido para início e fim da coluna de grade
Vamos nos aprofundar no conceito de início e fim da coluna Grid com exemplos no Tailwind Css neste artigo.
Um aspecto crítico do sistema de grade é a capacidade de controlar a posição e o tamanho dos itens da grade dentro de um contêiner de grade.
Isso é obtido usando o início/fim da coluna da grade, que permite especificar onde um item da grade começa e termina em termos de colunas da grade.
É uma alternativa à propriedade grid-columns do CSS.
Observação : se os valores {start} e {end} forem os mesmos, você pode usar a classe abreviada col-{breakpoint}-{start} para definir a posição inicial do item da grade.
Da mesma forma, se o valor {end} não for especificado, o item ocupará todas as colunas restantes à direita da posição inicial.
Índice-
Aulas de início e fim de coluna de grade
| Aulas | Visão geral |
| col-auto | Essa classe de utilitário pode ser usada para definir a largura de uma coluna de grade com base no conteúdo dentro dela. |
| col-span-1 | Em um contêiner de grade, isso define o número de colunas que um elemento abrange como 1. |
| col-span-2 | Um elemento ocupa duas colunas dentro de um contêiner de grade usando esta classe. |
| col-span-3 | Três colunas são ocupadas por um item de grade usando esta classe. |
| col-span-4 | O item de grade que usa essa classe abrange quatro colunas. |
| col-span-5 | O item da grade se estende para ocupar espaço de cinco colunas. |
| col-span-6 | O espaço de seis colunas é utilizado pelo item de grade. |
| col-span-7 | Usando esta classe, o item de grade cobre o espaço de sete colunas. |
| col-span-8 | Um elemento em um contêiner de grade se espalha em um espaço de oito colunas usando esta classe. |
| col-span-9 | Nove colunas são ocupadas pelo item de grade usando esta classe. |
| col-span-10 | Essa classe é usada para fazer um item de grade abranger dez colunas. |
| col-span-11 | Nesse caso, a largura de uma coluna de grade abrange 11 trilhas de grade. |
| col-span-12 | Doze colunas são ocupadas por um elemento em um contêiner de grade. |
| col-span-full | Essa classe é usada para especificar que um elemento deve abranger todas as colunas em um contêiner de grade. |
| col-start-1 | Esta classe é usada para iniciar um item de grade na primeira coluna da grade. |
| col-start-2 | Inicia um item de grade da segunda coluna na grade. |
| col-start-3 | Usando esta classe, o item da grade começa na terceira coluna. |
| col-start-4 | O item da grade começa na quarta coluna. |
| col-start-5 | Um elemento em um contêiner de grade usando esta classe começa na quinta coluna da grade. |
| col-start-6 | Nesse caso, o item da grade começa na sexta coluna. |
| col-start-7 | Esta classe é usada para iniciar um item de grade da sétima coluna. |
| col-start-8 | Usando esta classe, o item da grade começa na oitava coluna. |
| col-start-9 | O item de grade que usa essa classe começa na nona coluna da grade. |
| col-start-10 | Esta classe é usada para definir a coluna inicial de um elemento para a décima coluna da grade em um contêiner de grade. |
| col-start-11 | A posição inicial da coluna para um elemento dentro de um contêiner de grade é especificada como a 11ª linha da coluna. |
| col-start-12 | Nesse caso, a posição inicial de um elemento dentro de uma grade é definida como a 12ª linha vertical da grade. |
| col-start-13 | Usando esta classe, a posição inicial do item de grade é a 13ª linha de grade vertical. |
| col-start-auto | Essa classe é usada quando você deseja que o item da grade comece na primeira coluna disponível na grade. |
| col-end-1 | A posição final de um elemento em uma grade é especificada como a primeira linha da coluna. |
| col-end-2 | A segunda linha de coluna de um elemento de grade especifica sua posição final. |
| col-end-3 | A posição final de um elemento é especificada pela linha da terceira coluna em uma grade. |
| col-end-4 | As linhas da quarta coluna indicam a posição final de um elemento em uma grade. |
| col-end-5 | Um elemento em uma grade é especificado como tendo a linha da quinta coluna como sua posição final. |
| col-end-6 | Essa classe define a coluna final de um elemento como a 6ª coluna em uma grade. |
| col-end-7 | A coluna final de um elemento em uma grade é definida como a 7ª coluna usando esta classe. |
| col-end-8 | Em uma grade, esta classe define a coluna final do item da grade como a 8ª coluna. |
| col-end-9 | A coluna de fechamento de um item de grade será definida como a 9ª coluna ao usar esta classe. |
| col-end-10 | Ele define a coluna final de um item como a décima coluna em uma grade. |
| col-end-11 | Usando esta classe, a 11ª coluna de um item de grade é definida como a coluna final. |
| col-end-12 | Nesse caso, a posição final de um elemento dentro de uma grade é definida como a 12ª linha vertical da grade. |
| col-end-13 | Ao usar esta classe, a posição final do item de grade é a 13ª linha de grade vertical. |
| col-end-auto | Usando esta classe, a posição final de um elemento é definida como a última coluna do contêiner da grade. |
Colunas estendidas (col-span)
Este utilitário define o número de colunas que um elemento deve ocupar em um contêiner de grade.
O número representa a quantidade de colunas que uma coluna da grade irá ocupar.
Sintaxe
<element class="col-span-number"> </element>
No exemplo a seguir, o utilitário col-span está sendo demonstrado:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center"
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-medium my-2"Using col-span class in Tailwind
class="font-medium text-gray-500 text-sm"Total 5 rows in this grid
id="main" class="m-8 grid grid-cols-5 gap-1 justify-evenly font-medium"
class="bg-gray-300 col-span-1 rounded-lg h-12 "col-span-1
class="bg-gray-300 col-span-4 rounded-lg h-12"col-span-4
class="bg-gray-300 col-span-1 rounded-lg h-12"col-span-1
class="bg-gray-400 col-span-2 rounded-lg h-12"col-span-2
class="bg-gray-300 col-span-3 rounded-lg h-12"col-span-3
class="bg-gray-400 col-span-5 rounded-lg h-12"col-span-5
Linhas iniciais e finais (col-start|end)
Este utilitário permite especificar onde um item de grade começa e termina em termos de colunas de grade. O utilitário col-span também pode ser usado.
Sintaxe
<element class="col-start-number"> </element>
ou
<element class="col-end-number"> </element>
Este exemplo faz uso das classes col-start, col-end e col-span implementadas juntas:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="text-center"
class="text-gray-600 text-2xl font-semibold"
MrExamples
class="font-medium my-2"Using col-span class in Tailwind
class="font-medium text-gray-500 text-sm"Total 5 rows in this grid
id="main" class="m-8 grid grid-cols-5 gap-1 justify-evenly font-medium"
class="bg-gray-300 col-start-1 col-span-1 col-end-3 rounded-lg h-12 "col-start-1 col-span-1
class="bg-gray-300 col-start-3 col-end-5 rounded-lg h-12"col-start-3 col-end-5
class="bg-gray-300 col-start-2 col-span-2 col-end-4 rounded-lg h-12"col-start-2 col-span-2 col-end-4
class="bg-gray-300 col-start-4 col-end-5 rounded-lg h-12"col-start-4 col-end-5
class="bg-gray-300 col-start-1 col-span-3 rounded-lg h-12"col-start-1 col-span-3
class="bg-gray-300 col-start-2 col-span-4 rounded-lg h-12"col-start-2 col-span-4
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
