CSS Grid

CSS Grid Layout, también conocido simplemente como "Grid", es un sistema de diseño bidimensional que permite organizar los elementos en filas y columnas. A diferencia de Flexbox, que es unidimensional, Grid permite el control total del espacio en ambas direcciones.

¿Qué resuelve CSS Grid?

Antes de Grid, los desarrolladores usaban tablas, `float` y `inline-block` para maquetar sitios web. Estas técnicas eran limitadas y poco intuitivas. Grid permite crear diseños complejos de forma clara, precisa y con mucho menos código.

Estructura básica

CSS Grid se activa con display: grid; en un contenedor. Luego se definen las filas y columnas con grid-template-columns y grid-template-rows. Los elementos hijos (items) se colocan automáticamente en las celdas creadas o pueden ser posicionados con precisión usando propiedades como grid-column y grid-row.

Conceptos clave

• Línea (grid line): Líneas que dividen filas y columnas.
• Celda: Espacio entre dos líneas de fila y dos de columna.
• Área: Conjunto de celdas con un nombre asignado.
• Contenedor e ítems: Estructura básica para trabajar en Grid.

Propiedades esenciales de CSS Grid

• grid-template-columns / rows: Define el tamaño y número de columnas o filas.
• grid-area: Asigna nombre a una región específica.
• gap: Define el espacio entre filas y columnas.
• justify-items / align-items: Alinea los ítems dentro de sus celdas.
• justify-content / align-content: Alinea la cuadrícula dentro del contenedor.
• repeat(), minmax(), auto-fill, auto-fit: Funciones para generar diseños automáticos y adaptables.

Ejemplo básico

.contenedor {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
}

Unidades de medida

CSS Grid usa unidades como px (píxeles) y fr (fracciones del espacio disponible). Estas unidades permiten ajustar el tamaño de columnas y filas fácilmente.

Conclusión

CSS Grid es uno de los módulos más potentes de CSS para maquetar sitios web. Ofrece libertad, flexibilidad y orden en el diseño de páginas modernas, adaptables a cualquier pantalla.

Volver a la página de Flexbox

Volver al menú