O Tailwind CSS oferece um sistema de grade que permite aos usuários dividir a página da Web em colunas e linhas usando os utilitários grid-cols e grid-rows. Ele também fornece os utilitários de início e fim da coluna da grade para controlar o dimensionamento e a colocação de elementos nas colunas da grade. Esses utilitários permitem que os usuários especifiquem as posições inicial e final de um elemento no layout da grade.
Este artigo explicará o método para fazer com que as colunas comecem ou terminem na enésima linha de grade específica no Tailwind CSS.
Como fazer as colunas começarem ou terminarem na enésima linha de grade no Tailwind?
Para fazer com que as colunas comecem ou terminem na enésima linha de grade no Tailwind, utilize o “ col-start-
Etapa 1: Especifique as posições inicial e final dos elementos da grade no programa HTML
Faça um programa HTML e use o “ col-start-
< corpo >
< h1 aula = 'texto-2xl centro de texto' >
Tailwind CSS - início da coluna / Fim
h1 >
< div aula = 'grid grid-cols-4 gap-3 m-3' >
< div aula = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div aula = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div aula = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div aula = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div aula = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
corpo >
Aqui, no elemento
- “ grade ” é utilizado para criar um layout de grade.
- “ grid-cols-4 ” especifica que a grade deve ter 4 colunas de tamanho igual.
- “ lacuna-3 ” define um espaçamento de 3 unidades entre cada item da grade.
- “ m-3 ” adiciona uma margem de 3 unidades ao redor do contêiner da grade.
Nos elementos
- “ col-start-2 ” especifica que o item da grade começa na coluna 2.
- “ col-span-2 ” indica que o item da grade ocupa 2 colunas.
- “ col-start-1 ” é usado para iniciar o item de grade da coluna 1.
- “ col-end-3 ” especifica que o item da grade termina na coluna 3.
- “ col-start-3 ” indica que o item da grade começa na segunda coluna.
- “ col-end-5 ” finaliza o item da grade na coluna 5.
- “ col-span-3 ” especifica que o item da grade ocupa 3 colunas.
- “ bg-teal-500 ” define a cor azul-petróleo para o plano de fundo de todos os itens da grade.
- “ p-5 ” adiciona um preenchimento de 5 unidades ao conteúdo dentro dos itens da grade.
Etapa 2: verificar a saída
Para garantir que as posições inicial e final da coluna da grade foram aplicadas, visualize a página da Web em HTML:
A saída acima indica que as posições inicial e final da coluna da grade foram aplicadas com sucesso de acordo com o que foram especificadas.
Conclusão
Para fazer as colunas começarem ou terminarem na enésima linha de grade no Tailwind, o “ col-start-