Esta postagem detalha o procedimento completo para adicionar a lacuna entre as colunas no Tailwind.
Como adicionar lacunas entre colunas no Tailwind?
Para adicionar o espaço entre as colunas no Tailwind, use o built-in “ lacuna-{tamanho} ' Utilitário. Ele especifica um valor inteiro que representa a lacuna entre as colunas horizontal e verticalmente. Vamos fazer esta tarefa de forma prática com a ajuda dos exemplos indicados.
Estrutura de arquivos do projeto
O ' lacuna-{tamanho} ” pode ser implementado em qualquer um dos projetos Tailwind que seguem a estrutura de arquivo fornecida:
Vamos começar com o primeiro exemplo.
Exemplo 1: Use o utilitário “gap-{size}” para adicionar o mesmo espaço entre linhas e colunas
Este exemplo aplica o utilitário “gap-{size}” para adicionar o mesmo intervalo horizontal e verticalmente entre as colunas fornecidas.
Código HTML
Visão geral do seguinte código:
< cabeça >
< link href = '/dist/output.css' rele = 'folha de estilo' >
< / cabeça >
< corpo >
< h1 aula = 'texto-3xl fonte-negrito-centro de texto sublinhado texto-laranja-600' > Bem-vindo ao Linuxhint! < / h1 >< br >
< div aula = 'mx-2 grid grid-cols-3 gap-4' >
< div aula = 'border-2 border-orange-600' > Primeiro Tutorial < / div >
< div aula = 'border-2 border-orange-600' > Segundo Tutorial < / div >
< div aula = 'border-2 border-orange-600' > Terceiro Tutorial < / div >
< div aula = 'border-2 border-orange-600' > Quarto tutorial < / div >
< div aula = 'border-2 border-orange-600' > Quinto Tutorial < / div >
< div aula = 'border-2 border-orange-600' > Sexto Tutorial < / div >
< div aula = 'border-2 border-orange-600' > Sétimo Tutorial < / div >
< div aula = 'border-2 border-orange-600' > Oitavo Tutorial < / div >
< / div >
Nas linhas de código acima:
- Primeiro, vincule o arquivo CSS principal “ /dist/output.css ” com o arquivo HTML existente “ index.html ” usando o “ ” na seção “head”.
- Em seguida, a seção “body” cria um elemento “
” que usa o “ Tamanho da fonte ”, “ Espessura da fonte ”, “ Alinhamento de texto ”, “ Decoração de texto ', e a ' Cor do texto ” Classes Tailwind, respectivamente.
- Depois disso, um elemento “” é adicionado que aplica o “ grade ” utilitário para definir seu conteúdo no número declarado de layouts de grade, o “ margem ” para definir a margem horizontal e a classe “ brecha ” para adicionar o intervalo especificado entre as colunas.
- Na seção do corpo do elemento “
”, estão incluídos mais oito elementos “” que utilizam o “ Largura da Borda ' e a ' Cor da borda ” aulas, respectivamente.Saída
Execute o código HTML acima no servidor ativo e analise a saída:
Como visto, a saída adiciona o intervalo especificado entre as colunas em ambas as dimensões apropriadamente.
Exemplo 2: Use o utilitário “gap-{size}” para adicionar um intervalo entre linhas e colunas de forma independente
O ' lacuna-{tamanho} ” também pode ser implementado com as dimensões “x(horizontal)” e “y(vertical)” como “gap-x-{size}” para linhas e “gap-y-{size}” para colunas para adicionar o diferença entre eles individualmente.Vejamos sua implementação prática.
Código HTML
< cabeça >
Dê uma olhada no código fornecido:
< link href = '/dist/output.css' rele = 'folha de estilo' >
< / cabeça >
< corpo >
< div aula = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div aula = 'border-2 border-orange-600' >Primeiro Tutorial< / div >
< div aula = 'border-2 border-orange-600' >Segundo Tutorial< / div >
< div aula = 'border-2 border-orange-600' >Terceiro Tutorial< / div >
< div aula = 'border-2 border-orange-600' >Quarto Tutorial< / div >
< div aula = 'border-2 border-orange-600' >Quinto Tutorial< / div >
< div aula = 'border-2 border-orange-600' >Sexto Tutorial< / div >
< div aula = 'border-2 border-orange-600' >Sétimo Tutorial< / div >
< div aula = 'border-2 border-orange-600' >Oitavo Tutorial< / div >
< / div >
< corpo >Aqui o ' lacuna-x-{tamanho} ” adiciona o espaço entre as linhas e o “ lacuna-y-{tamanho} ” adiciona o intervalo especificado entre as colunas de forma independente.
Saída
O resultado acima verifica se o intervalo entre linhas e colunas é aplicado de acordo.
Conclusão
“Tailwind CSS” fornece um “ lacuna-{tamanho} ” utilitário para adicionar o espaço entre as colunas. Também pode ser usado para adicionar o espaço entre linhas e colunas separadamente por meio do botão “ lacuna-x-{tamanho} ' e a ' lacuna-y-{tamanho} ' Serviços de utilidade pública. Esta postagem forneceu o procedimento completo para adicionar a lacuna entre as colunas no Tailwind.
- Na seção do corpo do elemento “