Tailwind CSS Grid Flujo automático

Esta clase acepta más de un valor en Tailwind CSS, todas las propiedades están cubiertas como en el formulario de clase. Es la alternativa de la propiedad grid-auto-flow de CSS y se usa para especificar cómo los elementos colocados automáticamente fluyen hacia los elementos de la cuadrícula usando Tailwind CSS. 

Flujo automático de cuadrícula:

  • cuadrícula-flujo-fila
  • cuadrícula-flujo-col
  • cuadrícula-flujo-fila-denso
  • rejilla-flujo-col-denso

grid-flow-row: el algoritmo de colocación automática coloca los elementos llenando cada fila a su vez, agregando nuevas filas según sea necesario.

Sintaxis:

<element class="grid-flow-row"> Contents... </element>

Ejemplo:

HTML

<!DOCTYPE html> 
<html>
  
<head> 
    <title>Tailwind grid-flow-row Class</title> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
  
    <b>Tailwind CSS grid-flow-row Class</b> 
  
    <div class = "m-8 grid grid-flow-row gap-1">  
        <div class = "bg-green-300 rounded-lg">1</div>  
        <div class = "bg-green-300 rounded-lg">2</div>  
        <div class = "bg-green-300 rounded-lg">3</div>  
        <div class = "bg-green-300 rounded-lg">4</div>  
    </div>  
</body> 
    
</html>

Producción:

grid-flow-col: el algoritmo de colocación automática coloca los elementos llenando cada columna a su vez, agregando nuevas columnas según sea necesario.

Sintaxis:

<element class="grid-flow-col"> Contents... </element>

Ejemplo:

HTML

<!DOCTYPE html> 
<html>
  
<head> 
    <title>Tailwind grid-flow-col Class</title> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
  
    <b>Tailwind CSS grid-flow-col Class</b> 
  
    <div class = "m-8 grid grid-flow-col gap-1">  
        <div class = "bg-green-300 rounded-lg">1</div>  
        <div class = "bg-green-300 rounded-lg">2</div>  
        <div class = "bg-green-300 rounded-lg">3</div>  
        <div class = "bg-green-300 rounded-lg">4</div>  
    </div>  
</body> 
    
</html>

Producción:

grid-flow-row-dense: especificando que el algoritmo de colocación automática utiliza un algoritmo de empaquetamiento «denso» para la columna.

Sintaxis:

<element class="grid-flow-row-dense"> Contents... </element>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
   
<head> 
    <title>Tailwind grid-flow-row-dense Class</title> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
  
    <b>Tailwind CSS grid-flow-row-dense Class</b> 
  
    <div class = "m-8 grid grid-flow-row-dense gap-1">  
        <div class = "bg-green-300 rounded-lg">1</div>  
        <div class = "bg-green-300 rounded-lg">2</div>  
        <div class = "bg-green-300 rounded-lg">3</div>  
        <div class = "bg-green-300 rounded-lg">4</div>  
    </div>  
</body> 
    
</html>

Producción:

grid-flow-col-dense:  especificando que el algoritmo de colocación automática utiliza un algoritmo de empaquetado «denso» para las filas.

Sintaxis:

<element class="grid-flow-col-dense">..</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<html>
  
<head> 
    <title>Tailwind grid-flow-col-dense Class</title> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
  
    <b>Tailwind CSS grid-flow-col-dense Class</b> 
  
    <div class = "m-8 grid grid-flow-col-dense gap-1">  
        <div class = "bg-green-300 rounded-lg">1</div>  
        <div class = "bg-green-300 rounded-lg">2</div>  
        <div class = "bg-green-300 rounded-lg">3</div>  
        <div class = "bg-green-300 rounded-lg">4</div>  
    </div>  
</body> 
    
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *