Como aplicar o fluxo automático de foco na grade no Tailwind?

Este artigo exemplificará o método para aplicar o efeito hover no utilitário grid auto flow no Tailwind CSS.

Como aplicar o fluxo automático do foco na grade no Tailwind?

Para aplicar o efeito de foco no fluxo automático da grade no Tailwind, crie um arquivo HTML e use o “ flutuar ” classe com o “ grid-flow- ” no programa HTML. Ele altera o posicionamento dos itens da grade quando o mouse passa sobre eles. Por fim, visualize a página HTML da Web e passe o mouse sobre os itens da grade para garantir as alterações.

Veja as etapas fornecidas para sua implementação prática:

Etapa 1: Use a propriedade Hover com a grade de linha no programa HTML
Crie um programa HTML e use o “ flutuar ” propriedade com o desejado “ grid-flow- ' Utilitário. Por exemplo, usamos o “ hover:grid-flow-row ” para alterar o posicionamento dos itens da grade da coluna para a linha ao passar o mouse:

Aqui:

• “ grade ” define o elemento como um contêiner de grade.
• “ grid-flow-col ” define o fluxo de itens de grade em colunas.
• “ hover:grid-flow-row ” altera o fluxo de itens de grade para linhas quando o mouse passa sobre o contêiner.
• “ lacuna-3 ” adiciona um intervalo de 3 unidades entre os itens da grade.
• “ m-3 ” adiciona uma margem de 3 unidades ao redor do contêiner da grade.
• “ centro de texto ” alinha o conteúdo do texto dentro dos itens da grade ao centro.

Etapa 2: verificar a saída
Para verificar se o efeito de foco foi aplicado no fluxo automático da grade, visualize a página da Web e mova o mouse sobre os itens da grade:

Pode-se observar que inicialmente o fluxo dos itens da grade está em colunas e ao passar o mouse sobre elas, o fluxo é alterado para linhas. Isso indica que o efeito de foco foi aplicado com sucesso ao fluxo automático da grade.

Conclusão

Para aplicar o efeito de foco no fluxo automático da grade no Tailwind, use o botão “ flutuar ” classe com o desejado “ grid-flow- ” no programa HTML. Ele altera o posicionamento dos itens da grade quando o mouse passa sobre eles. Para garantir as alterações, visualize a página HTML da Web e passe o mouse sobre os itens da grade. Este artigo exemplificou o método para aplicar o efeito de foco no utilitário de fluxo automático de grade no Tailwind CSS.