CSS Grid en la práctica Diseños útiles sin marco

Flexbox o Grid? Usa ambos. Flexbox maneja un eje — fila o columna. CSS Grid maneja ambos al mismo tiempo. Esa distinción guía cada decisión de diseño que tomarás.

Las propiedades que realmente importan

Puedes construir casi cualquier diseño que encontres con cinco propiedades: grid-template-columns, grid-template-rows, gap, grid-areay place-items. Aquí tienes una tarjeta centrada en seis líneas:

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

place-items: center es abreviatura de align-items + justify-items. Una línea, contenido perfectamente centrado, sin necesidad de cálculos.

La unidad fr: deje de pensar en porcentajes

Los porcentajes no tienen en cuenta el espacio de separación. fr (unidad fraccional) distribuye espacio restante después de colocar valores fijos. Esto es un sistema de 12 columnas: Cada

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Span 4 of 12 columns */
.col-4 {
  grid-column: span 4;
}

/* Span 8 of 12 columns */
.col-8 {
  grid-column: span 8;
}

recibe una parte igual del espacio restante tras restar el espacio de separación. Tres columnas de 1fr nunca superarán el contenedor — algo repeat(3, 1fr) puede salir mal cuando hay separación. 33.33% Auto-fill vs auto-fit: redes responsivas sin consultas de medios

Ambos términos permiten al navegador decidir cuántas columnas caben. La diferencia se muestra cuando hay menos elementos que el número que puede contener el diseño.

auto-fill

mantiene las columnas vacías. auto-fit las colapsa, permitiendo que los elementos existentes se estiren para llenar la fila. Para una red de tarjetas, casi siempre deseas Eso es una red de tarjetas completamente responsive. Sin puntos de ruptura. Cada tarjeta tiene al menos 280px de ancho, y el navegador ajusta cuántas caben por fila. Cuando el viewport se reduce por debajo de 280px, pasa a una sola columna. Usa auto-fill:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

si deseas que tres tarjetas en una pantalla ancha se estiren y llenen la fila en lugar de quedarse en columnas fijas con espacio vacío a su lado. auto-fit Prototipar este tipo de diseño manualmente requiere tiempo. Un

generador de redes CSS en línea te permite configurar visualmente columnas, filas y espacios antes de escribir una línea — vale la pena los dos minutos que ahorra al depurar cálculos de columnas. Áreas nombradas: diseños que se pueden leer

Las áreas de red reemplazan el cálculo de números posicionales con nombres legibles. El diseño ideal — cabecera, barra lateral, contenido principal y pie de página — es un ejemplo claro:

cadena es un mapa visual de tu diseño. Un punto (

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 1rem;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

El grid-template-areas ) marca una celda vacía. Renombra una sección cambiando la cadena — sin necesidad de recalcular números de línea..Diseños comunes en menos de 10 líneas

Una vez que tengas los fundamentos, la mayoría de los patrones recurrentes se reducen a unas pocas líneas.

Barra lateral + contenido:

Secciones apiladas con ritmo vertical consistente:

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
}

Red de iconos que se adapta automáticamente:

.page-sections {
  display: grid;
  gap: 4rem;
}

Inspeccionador de red en Chrome DevTools

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 1rem;
}

Abre DevTools, selecciona cualquier contenedor de red en el panel de Elementos y busca el

badge adjunto al elemento. Haz clic en él para alternar la capa de red — obtienes una visualización de cada columna, fila y separación dibujada directamente en la página. En el

panel de Diseño (al lado de Computed y Estilos), puedes controlar qué muestra la capa: números de línea, nombres de línea, nombres de área y líneas extendidas que proyectan más allá del límite de la red. Cuando un diseño se rompe, habilitar los números de línea mientras observas la capa suele revelar inmediatamente el tramo mal alineado — mucho más rápido que leer valores brutos en el panel de Estilos. grid-column Una costumbre práctica: construye primero la estructura en DevTools, luego asocia los valores a tu hoja de estilos una vez que el diseño se vea bien.

Lo que Grid aún deja para Flexbox

Grid es la opción adecuada para estructuras bidimensionales: secciones de página, arreglos de tarjetas, dashboards complejos. Flexbox sigue siendo mejor para flujos unidimensionales — enlaces de navegación que se envuelven, grupos de botones, entradas de formulario con etiquetas en línea, y cualquier lugar en el que los elementos crezcan o se reduzcan según su contenido en lugar de tener un tramo definido.

En la práctica, usarás Grid para el diseño externo y Flexbox para los componentes dentro de él. Se combinan de forma limpia; elige aquel que se adapte al eje del problema.

CSS Grid en la práctica: diseños útiles sin marco 2

También te puede interesar