Puede hacer fácilmente que los elementos de la cuadrícula CSS tengan altura automática utilizando la propiedad grid-template-columns en Tailwind CSS .
Tailwind utiliza la propiedad grid-col y grid-row , que es una alternativa a la propiedad grid-template-columns en CSS. La propiedad grid-template-columns en CSS se usa para establecer el número de columnas y el tamaño de las columnas de la cuadrícula.
Esta clase acepta más de un valor en Tailwind CSS, todas las propiedades están cubiertas como en el formulario de clase. El número de columnas se establece por el número de valores dados a esta clase.
Columnas de plantilla de cuadrícula:
- grid-cols-1: Cada fila concede solo una columna.
- grid-cols-6: Cada fila concede seis columnas.
- grid-cols-12: Cada fila concede doce columnas.
Sintaxis:
<element class="grid grid-cols-number"> Contents... </element>
Ejemplo 1:
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> <div class="grid grid-cols-2"> <div class="bg-pink-500 m-3">GEEKSFORGEEKs</div> <div class="bg-green-500 m-3">Courses</div> <div class="px-1 bg-green-500 m-3"> <ol> <li>Data Structure</li> <li>Competitive Programming</li> </ol> </div> <div class="px-1 bg-pink-500 m-3"> Web Development </div> <div class="px-1 bg-pink-500 m-3"> Machine Learning </div> <div class="px-1 bg-green-500 m-3"> <ul> <li>ReactJs</li> <li>Angular</li> <li>Vue</li> </ul> </div> </div> </body> </html>
Producción:
Nota: A partir del resultado anterior, puede observar que cada fila tiene una altura diferente según la altura máxima requerida por una cuadrícula de una fila en particular.
Ejemplo 2:
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> <div class="grid grid-cols-3"> <div class="h-40 w-40 bg-green-400 m-3">1) ROW-1</div> <div class="h-50 w-40 bg-green-400 m-3">2) ROW-1</div> <div class="h-60 w-40 bg-green-400 m-3">3) ROW-1</div> <div class="h-80 w-40 bg-blue-400 m-3">1) ROW-2</div> <div class="h-40 w-40 bg-blue-400 m-3">1) ROW-2</div> <div class="h-20 w-40 bg-blue-400 m-3">1) ROW-2</div> <div class="h-40 w-40 bg-red-400 m-3">1) ROW-3</div> <div class="h-40 w-40 bg-pink-500 m-3">2) ROW-3</div> <div class="h-40 w-40 bg-pink-500 m-3">3) ROW-3</div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA