Este artigo exemplificará o método para aplicar pontos de interrupção e consultas de mídia na grade de linha no Tailwind CSS.
Como aplicar pontos de interrupção e consultas de mídia na grade de linhas no Tailwind?
Para aplicar pontos de interrupção e consultas de mídia na grade de linha no Tailwind, crie um programa HTML. Em seguida, defina o número de linhas para vários tamanhos de tela usando o botão “ sm ”, “ md ' ou ' lg ” pontos de interrupção com o “ grid-rows-
Vamos explorar a implementação prática:
Etapa 1: Use pontos de interrupção e consultas de mídia com grade de linha no programa HTML
Crie um programa HTML e defina o número de linhas para diferentes tamanhos de tela com o botão “ grid-rows-
< corpo >
< div aula = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div aula = 'bg-teal-500 p-5' > 1 < / div >
< div aula = 'bg-teal-500 p-5' > 2 < / div >
< div aula = '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 = 'bg-teal-500 p-5' > 6 < / div >
< div aula = 'bg-teal-500 p-5' > 7 < / div >
< div aula = 'bg-teal-500 p-5' > 8 < / div >
< div aula = 'bg-teal-500 p-5' > 9 < / div >
< div aula = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / corpo >
Aqui:
- “ grade ” é utilizada para criar um layout de grade.
- “ grid-rows-2 ” especifica que a grade deve ter 2 linhas de tamanho igual.
- “ md:grid-rows-3 ” altera a grade em 3 linhas de tamanho igual em tamanho de tela médio.
- “ lg:grid-rows-5 ” altera a grade em 5 linhas de tamanho igual no tamanho da tela grande.
- “ 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.
- “ bg-teal-500 ” define a cor azul-petróleo para o plano de fundo dos itens da grade.
- “ p-5 ” adiciona um preenchimento de 5 unidades ao conteúdo dentro do filho
Unid.
Etapa 2: verificar a saída
Para garantir que os pontos de interrupção e as consultas de mídia tenham sido aplicados na grade de linhas, visualize a página da Web em HTML alterando o tamanho da tela:
Na saída acima, pode-se ver que o número de linhas muda com o tamanho da tela. Isso indica que os pontos de interrupção e consultas de mídia foram aplicados com sucesso na grade de linha.
Conclusão
Para aplicar pontos de interrupção e consultas de mídia na grade de linha no Tailwind, defina o número de linhas para vários tamanhos de tela usando o parâmetro “ sm ”, “ md ' ou ' lg ” pontos de interrupção com o “ grid-rows-
' Serviços de utilidade pública. Em seguida, garanta as alterações na página da web alterando o tamanho da tela. Este artigo exemplificou o método para aplicar pontos de interrupção e consultas de mídia na grade de linha no Tailwind CSS.