CSS Grid: la solución para diseños bidimensionales

Al finalizar este tema

Comprenderá cómo crear diseños basados en filas y columnas con CSS Grid.

Cuando Flexbox no es suficiente

Flexbox es unidimensional. Organiza los elementos en una sola dirección, ya sea horizontal o vertical. Sin embargo, presenta limitaciones cuando se trata de diseños que requieren controlar tanto las filas como las columnas, como un panel de control.

CSS Grid es un sistema de diseño bidimensional. Define filas y columnas simultáneamente, lo que permite colocar los elementos en la celda deseada.

Uso básico

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 40px;
  gap: 16px;
}

Se trata de un diseño de cuadrícula de 3 columnas y 3 filas. 1fr indica que debe ocupar el espacio restante (fracción). 200 píxeles a la izquierda, el resto en el centro y 200 píxeles a la derecha.

Unidad fr

grid-template-columns: 1fr 2fr 1fr;

El espacio restante se divide en proporciones. Como la proporción es 1:2:1, la columna central tiene el doble de ancho que las columnas laterales. También se puede combinar con píxeles (px):

grid-template-columns: 250px 1fr;

La columna izquierda tiene un ancho fijo de 250 píxeles; la columna derecha ocupa el espacio restante.

repeat — patrón repetitivo

Cuando se desea utilizar la misma columna varias veces:

/* misma expresión */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);

Cuadrícula de tarjetas adaptable:

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

Con solo una línea se completa la cuadrícula de tarjetas responsiva: "mínimo 250px, distribución uniforme si hay espacio disponible, salto de línea si no hay suficiente espacio". Sin consultas de medios.

Disposición de elementos

Es posible colocar un elemento específico en la celda deseada:

.header {
  grid-column: 1 / -1; /* desde la línea 1 hasta la última (ancho completo) */
}

.sidebar {
  grid-row: 2 / 4; /* desde la línea 2 hasta la línea 4 (ocupa 2 filas) */
}

grid-column: 1 / 3 ocupa dos columnas, desde la primera hasta la tercera línea vertical. -1 es la última línea.

grid-template-areas — Disposición visual

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: 60px 1fr 40px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

En CSS, puedes diseñar el diseño de la página de forma visual.

Grid vs. Flexbox

Puedes usar ambos. Tienen funciones diferentes:

Flexbox: Diseño en una sola dirección. Barras de navegación, grupos de botones, alineación del contenido dentro de las tarjetas. Grid: Control simultáneo de filas y columnas. Diseño completo de la página, paneles de control, cuadrículas de tarjetas.

Normalmente, se usa Grid para el diseño principal y Flexbox para alinear los elementos internos más pequeños.

Conceptos clave

CSS Grid es un sistema de diseño bidimensional que permite controlar filas y columnas simultáneamente. Divide el espacio restante en proporciones mediante unidades fr y crea diseños responsivos con repeat(auto-fill, minmax(...)). Es habitual utilizar Grid para el diseño general y Flexbox para alinear los elementos pequeños.