No Tailwind CSS, a extensão de linha faz com que um elemento ocupe duas ou mais linhas dentro da grade. É usado para definir o número de linhas que um elemento deve ocupar/span. Ele permite que os usuários ajustem o tamanho e a posição do item da grade em várias linhas e criem diferentes layouts. Além disso, pode ser usado para criar layouts de grade flexíveis e responsivos para páginas da web.
Este artigo exemplificará o método para fazer uma extensão de linhas no Tailwind CSS.
Como fazer um intervalo de linhas no Tailwind?
Para fazer as linhas se estenderem no Tailwind, crie um programa HTML. Em seguida, utilize o “ intervalo de linha-
Para implementação prática, confira as etapas fornecidas:
Etapa 1: criar extensão de coluna no programa HTML
Crie um programa HTML e use o “ intervalo de linha-
< corpo >
< div aula = 'grade grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< div aula = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div aula = 'bg-teal-500 p-5' > 2 < / div >
< div aula = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div aula = 'bg-teal-500 p-5' > 4 < / div >
< div aula = 'bg-teal-500 p-5' > 5 < / div >
< div aula = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / corpo >
Aqui, no elemento
- “ grade ” é utilizada para criar um layout de grade.
- “ grid-row-4 ” define o número de linhas na grade como 4.
- “ grid-flow-col ” coloca os itens da grade horizontalmente em colunas.
- “ lacuna-3 ” define um espaçamento de 3 unidades entre cada item da grade.
- “ m-3 ” aplica uma margem de 3 unidades ao redor do contêiner da grade.
- “ centro de texto ” define o texto de cada item da grade para o centro.
Nos elementos filhos
- “ linha-extensão-3 ” especifica que o elemento deve abranger 3 linhas na grade.
- “ linha-extensão-2 ” indica que o elemento deve abranger 2 linhas na grade.
- “ fileira-extensão-4 ” especifica que o elemento deve abranger 4 linhas na grade.
- “ bg-teal-500 ” define a cor azul-petróleo para o plano de fundo do item da grade.
- “ p-5 ” adiciona um preenchimento de 5 unidades ao conteúdo dentro dos itens filhos .
Etapa 2: verificar a saída
Visualize a página da Web HTML para verificar se o intervalo de linha foi aplicado ou não:
Na saída acima, pode-se observar que o intervalo de linha foi aplicado com sucesso de acordo com o que foi especificado.
Conclusão
Para fazer as linhas se estenderem no Tailwind, use o comando “ intervalo de linha-
” no programa HTML e especifique o número de linhas que cada elemento deve abranger. Para verificação, visualize as alterações na página da Web em HTML. Este artigo exemplificou o método para fazer uma extensão de linhas no Tailwind CSS.