Otra forma de organizar el contenido de un sitio web es mediante cuadrículas. Tailwind CSS ofrece utilidades potentes para crear diseños de cuadrícula. Este capítulo explicará cómo utilizar las utilidades de cuadrícula de Tailwind CSS para establecer contenedores y elementos de cuadrícula.

Contenedor de cuadrícula

Para definir un contenedor de cuadrícula, utiliza la clase grid. Puedes controlar la cantidad de columnas, los espacios entre filas y columnas, y más.

Explicación

1. grid: Establece el display del elemento como grid;
2. grid-cols-3: Define una cuadrícula con tres columnas;
3. gap-4: Agrega un espacio de 1rem (16px) entre los elementos de la cuadrícula.

Grid con Filas

grid-rows-2: Define una cuadrícula con dos filas.

Control de tamaños de columnas y filas

Es posible controlar los tamaños de las columnas y filas utilizando las clases grid-cols-{n} y grid-rows-{n}, donde {n} representa la cantidad de columnas o filas. También se pueden emplear unidades fraccionarias (fr), porcentajes y otras unidades de medida.

Explicación

1. col-span-2: El elemento abarca dos columnas;
2. col-span-3: El elemento abarca las tres columnas.

Tamaños fijos y flexibles

Explicación

1. w-1/2: Establece el ancho del elemento al 50% de su contenedor;
2. w-full: Establece el ancho del elemento al 100% de su contenedor;
3. w-1/3: Establece el ancho del elemento al 33.33% de su contenedor.

Columnas y filas de plantilla de cuadrícula

Se pueden utilizar clases utilitarias específicas para definir el número y el ancho de las columnas y filas en el diseño de cuadrícula.

Columnas de cuadrícula personalizadas

Explicación

1. grid-cols-4: Define una cuadrícula con cuatro columnas;
2. col-span-1: Extiende el elemento a lo largo de una columna;
3. col-span-2: Extiende el elemento a lo largo de dos columnas.

Filas de cuadrícula personalizadas

Explicación

1. grid-rows-3: Define una cuadrícula con tres filas;
2. row-span-2: El elemento abarca dos filas;
3. row-span-1: El elemento abarca una fila.

Nota

Consulte la documentación oficial para obtener más información sobre el Grid de Tailwind CSS.