Início e fim da linha de grade no Tailwind CSS
Neste artigo, discutiremos as classes Grid row start e end no Tailwind CSS e como elas podem ser usadas para definir as posições inicial e final de um item de grade dentro de uma linha.
As classes utilitárias Grid Row Start/End no Tailwind CSS fornecem uma maneira de definir as posições inicial e final dos itens da grade em um contêiner de grade ao longo do eixo vertical.
Essas classes funcionam especificando o número ou nome da linha onde o item da grade deve começar ou terminar.
De maneira semelhante às classes de início/fim de coluna de grade , as classes de início/fim de linha de grade também podem ser combinadas para controlar a colocação de itens de grade.
Índice-
Início / Fim da Linha da Grade
| Aulas | Visão geral |
| linha automática | Essa classe pode ser usada para definir a altura das linhas da grade a serem determinadas automaticamente pela altura de seu conteúdo. |
| fileira-extensão-1 | O item de grade que usa esta classe ocupará uma única linha na grade. |
| linha-extensão-2 | Os itens de grade que usam esta classe ocuparão duas linhas. |
| linha-extensão-3 | Esta classe permitirá que um item de grade ocupe três linhas. |
| fileira-extensão-4 | Quatro linhas na grade serão ocupadas por um item com esta classe. |
| fileira-extensão-5 | Ao usar esta classe, cada item da grade ocupará cinco linhas. |
| fileira-extensão-6 | Esta classe preencherá seis linhas da grade. |
| linha-extensão-7 | Usando esta classe, um item de grade ocupará sete linhas. |
| fileira-extensão-8 | Essa classe ocupa oito linhas para cada item da grade. |
| fileira-extensão-9 | Nove linhas serão ocupadas por cada item da grade ao usar esta classe. |
| linha-extensão-10 | O elemento que usa esta classe ocupa dez linhas para cada item da grade. |
| linha-extensão-11 | Usando esta classe, cada item da grade ocupa onze linhas. |
| linha-extensão-12 | Usando esta classe, os itens da grade ocuparão doze linhas. |
| linha-extensão-completa | Um elemento com esta classe ocupa todas as linhas em um contêiner de grade. |
| linha-início-1 | Nesse caso, a linha de grade inicial de um elemento é especificada como a primeira linha de linha dentro de um contêiner de grade. |
| linha-início-2 | Isso especifica a segunda linha de linha dentro de um contêiner de grade para ser a linha de grade inicial de um elemento. |
| linha-início-3 | A linha de grade inicial de um elemento dentro de um contêiner de grade corresponde à linha da terceira linha. |
| linha-início-4 | Quando esta classe é usada, a linha de grade inicial de um elemento é a quarta linha de linha de um contêiner de grade. |
| linha-início-5 | Você pode usar esta classe para iniciar um item de grade na quinta linha. |
| linha-início-6 | Usando esta classe, a primeira linha de linha do contêiner de grade é especificada como a linha de grade inicial de um elemento. |
| linha-início-7 | Essa classe pode ser usada para iniciar um item de grade na sétima linha. |
| linha-início-8 | Usando esta classe, você pode iniciar um item de grade na oitava linha. |
| linha-início-9 | Se você deseja iniciar um item de grade na nona linha, pode usar esta classe. |
| início da linha-10 | Essa classe permite iniciar um item de grade na décima linha. |
| linha-início-11 | É possível usar esta classe para iniciar um item de grade na décima primeira linha. |
| linha-início-12 | Essa classe garante que a décima segunda linha de linha seja a linha de grade inicial de um elemento em um contêiner de grade. |
| linha-início-13 | Usando esta classe, um elemento em um contêiner de grade começa com a décima terceira linha de linha. |
| linha-início-automático | Usando esta classe, os itens da grade são posicionados na primeira linha disponível com base no modelo de linha. |
| linha-fim-1 | Usado para definir a linha final do item para ser a primeira linha de grade da linha. |
| linha-fim-2 | Especifica a segunda linha de grade da linha como a linha final de um item. |
| linha-final-3 | Define a terceira linha de grade na linha como a linha final do item. |
| linha-fim-4 | Essa classe é usada para definir a quarta linha de grade de uma linha como a linha final do item. |
| linha-final-5 | Esta classe define a linha de grade final do item como a quinta linha de grade. |
| linha-fim-6 | A linha final do item deve ser a sexta linha de grade da linha. |
| linha-fim-7 | Ele é usado para definir a linha final do item como a linha de grade da sétima linha. |
| linha-final-8 | A linha final de um item é definida como a oitava linha de grade da linha. |
| linha-final-9 | Os itens de grade que usam essa classe terminam na linha nove. |
| final da linha-10 | O item de grade que usa essa classe termina na décima linha. |
| final da linha-11 | Nesta classe, a décima primeira linha é especificada como a linha final. |
| final da linha-12 | Para especificar a décima segunda linha como a linha final, use esta classe. |
| final da linha-13 | Ao usar essa classe, você pode especificar que a décima terceira linha é a linha final. |
| final de linha automático | Como resultado do uso dessa classe, o item da grade terminará no final da linha. |
Abrangendo linhas (row-span)
Especifica o número de linhas que um elemento deve abranger em um contêiner de grade.
Sintaxe
<element class="row-span-number"> </element>
O exemplo a seguir é usado para demonstrar o utilitário row-span no Tailwind:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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 row-span class in Tailwind CSS
id="main" class="m-8 grid grid-row-5 grid-flow-col gap-1"
class="bg-gray-300 row-span-5 rounded-lg"row-span-5
class="bg-gray-300 row-span-1 rounded-lg"row-span-1
class="bg-gray-300 row-span-4 rounded-lg"row-span-4
class="bg-gray-300 row-span-3 rounded-lg"row-span-3
class="bg-gray-300 row-span-1 rounded-lg"row-span-1
class="bg-gray-300 row-span-2 rounded-lg"row-span-2
Linhas iniciais e finais (linha-início|fim)
Isso é usado para definir as posições inicial e final de um item de grade na direção vertical (ao longo das linhas) em um contêiner de grade .
Sintaxe
<element class="row-start-number"> </element>
ou
<element class="row-end-number"> </element>
Aqui está um breve exemplo que cobre as classes de utilitário row-start/end junto com row-span no Tailwind:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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 row-span class in Tailwind CSS
id="main" class="m-8 grid grid-row-5 grid-flow-col gap-1"
class="bg-gray-300 row-start-2 row-span-2 rounded-lg"row-start-2 row-span-2
class="bg-gray-300 row-start-2 row-end-4 rounded-lg"row-start-2 row-end-4
class="bg-gray-300 row-span-4 row-end-4 rounded-lg"row-span-4 row-end-4
class="bg-gray-300 row-start-1 row-span-3 rounded-lg"row-start-1 row-span-3
class="bg-gray-300 row-start-1 row-end-3 rounded-lg"row-start-1 row-end-3
class="bg-gray-300 row-start-3 row-end-4 rounded-lg"row-start-3 row-end-4
Concluindo , as classes de início e término de linha de grade no Tailwind fornecem uma maneira simples e flexível de especificar as posições inicial e final de um item de grade em uma linha.
Até agora, você adquiriu conhecimento sobre como aplicar efetivamente as propriedades de início e fim da linha de grade no Tailwind.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
