Esta clase acepta más de un valor en Tailwind CSS y todas las propiedades están cubiertas como en el formulario de clase. Es la alternativa de la propiedad CSS grid-template-row en CSS. Se utiliza para establecer el número de filas y el tamaño de las filas de la cuadrícula, aquí haremos lo mismo pero para un desarrollo rápido de la interfaz. El número de filas se establece por el número de valores dados a esta clase.
Filas de plantilla de cuadrícula:
- grid-rows-1: Cada fila concede solo una fila.
- grid-rows-2: Cada fila concede solo dos filas.
- grid-rows-3: Cada fila concede solo tres filas.
- grid-rows-4: Cada fila concede solo cuatro filas.
- grid-rows-5: Cada fila concede solo cinco filas.
- grid-rows-6: Cada fila concede seis filas.
- grid-rows-none: no sigue la propiedad grid-row.
Sintaxis:
<element class="grid grid-rows-number"> Contents... </element>
Ejemplo 1:
HTML
<!DOCTYPE html> <head> <title>Tailwind grid-rows 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-rows Class</b> <div id="main" class="grid grid-rows-3 grid-flow-col"> <div class="bg-green-500 rounded-lg m-4 h-12">1</div> <div class="bg-green-500 rounded-lg m-4 h-12">2</div> <div class="bg-green-500 rounded-lg m-4 h-12">3</div> <div class="bg-green-500 rounded-lg m-4 h-12">4</div> <div class="bg-green-500 rounded-lg m-4 h-12">5</div> <div class="bg-green-500 rounded-lg m-4 h-12">6</div> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <head> <title>Tailwind grid-rows 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-rows Class</b> <div id="main" class="grid grid-rows-2 grid-flow-col"> <div class="bg-green-500 rounded-lg m-4 h-12">1</div> <div class="bg-green-500 rounded-lg m-4 h-12">2</div> <div class="bg-green-500 rounded-lg m-4 h-12">3</div> <div class="bg-green-500 rounded-lg m-4 h-12">4</div> <div class="bg-green-500 rounded-lg m-4 h-12">5</div> <div class="bg-green-500 rounded-lg m-4 h-12">6</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