Esta clase acepta más de un valor en Tailwind CSS en el que todas las propiedades están cubiertas como en forma de clase. Es la alternativa a la propiedad grid-auto-rows de CSS . Esta clase se utiliza para especificar el tamaño de las filas de contenedores de cuadrícula generados implícitamente. Esta clase se utiliza para las utilidades para controlar el tamaño de las filas de cuadrícula creadas implícitamente.
Clases de filas automáticas de cuadrícula:
- auto-filas-auto
- auto-filas-min
- auto-filas-max
- auto-filas-fr
auto-rows-auto: Es el valor por defecto. El tamaño se determina implícitamente según el tamaño del contenedor.
Sintaxis:
<element class="auto-rows-auto">..</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <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 Auto Rows Class</b> <div class ="m-8 p-8 grid bg-green-600 grid-cols-2 grid-flow-row gap-4 auto-rows-auto"> <div class = "p-4 bg-green-200"> LiveScript Become JavaScript </div> <div class = "p-4 bg-green-200"> HyperText Markup language </div> <div class = "p-4 bg-green-200"> Bootstratp become replacement of CSS </div> <div class = "p-4 bg-green-200"> Cascading Style Sheet </div> </div> </body> </html>
Producción:
auto-rows-min: Especifica el tamaño en función del elemento más pequeño del contenedor.
Sintaxis:
<element class="auto-rows-min">..</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <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 Auto Rows Class</b> <div class ="m-8 p-8 grid bg-green-600 grid-cols-2 grid-flow-row gap-4 auto-rows-min"> <div class = "p-4 bg-green-200"> LiveScript Become JavaScript </div> <div class = "p-4 bg-green-200"> HyperText Markup language </div> <div class = "p-4 bg-green-200"> Bootstratp become replacement of CSS </div> <div class = "p-4 bg-green-200"> Cascading Style Sheet </div> </div> </body> </html>
Producción:
auto-rows-max: Especifica el tamaño dependiendo del elemento más grande del contenedor.
Sintaxis:
<element class="auto-rows-max">..</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <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 Auto Rows Class</b> <div class ="m-8 p-8 grid bg-green-600 grid-cols-2 grid-flow-row gap-4 auto-rows-max"> <div class = "p-4 bg-green-200"> LiveScript Become JavaScript </div> <div class = "p-4 bg-green-200"> HyperText Markup language </div> <div class = "p-4 bg-green-200"> Bootstratp become replacement of CSS </div> <div class = "p-4 bg-green-200"> Cascading Style Sheet </div> </div> </body> </html>
Producción:
auto-rows-fr: Especifica el tamaño en el rango de [min, max] mayor o igual a min y menor o igual a max .
Sintaxis:
<element class="auto-rows-fr">..</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <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 Auto Rows Class</b> <div class ="m-8 p-8 grid bg-green-600 grid-cols-2 grid-flow-row gap-4 auto-rows-fr"> <div class = "p-4 bg-green-200"> LiveScript Become JavaScript </div> <div class = "p-4 bg-green-200"> HyperText Markup language </div> <div class = "p-4 bg-green-200"> Bootstratp become replacement of CSS </div> <div class = "p-4 bg-green-200"> Cascading Style Sheet </div> </div> </body> </html>
Producción:
Filas automáticas
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA