CSS Grid permite organizar contenido en filas y columnas. Es una buena opción para una galería, un listado de productos o una sección de tarjetas cuyas columnas deban mantener una estructura común.
Para empezar, añade display: grid al contenedor y define sus columnas con grid-template-columns. Sus hijos directos ocuparán las celdas según las reglas de colocación.
Ejemplo de tres columnas con CSS Grid
<div class="catalogo">
<article>Diseño web</article>
<article>Branding</article>
<article>Optimización</article>
<article>Mantenimiento</article>
</div>
<style>
.catalogo {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.catalogo article {
min-width: 0;
padding: 24px;
background: #eef6ff;
border-radius: 12px;
overflow-wrap: anywhere;
}
</style>repeat(3, ...) repite tres columnas. 1fr representa una fracción del espacio disponible para esas pistas. El mínimo cero evita que el mínimo intrínseco de una columna la obligue a ser más ancha de lo esperado; también debes revisar el contenido que pueda desbordar.
Cómo hacer la cuadrícula responsive sin media queries
Sustituye la definición de columnas del ejemplo por esta:
.catalogo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 24px;
}auto-fit crea las columnas que caben y colapsa las pistas repetidas que quedan vacías. minmax establece un mínimo y un máximo; min(100%, 240px) evita imponer 240 píxeles cuando el contenedor es aún más estrecho.
Esta solución adapta el número de columnas al contenedor, no a una lista de modelos de teléfono.
Auto-fit y auto-fill: diferencia práctica
Ambos calculan cuántas pistas repetidas pueden caber. Si hay menos elementos que columnas posibles, auto-fit colapsa las pistas vacías y permite que las ocupadas aprovechen más espacio. auto-fill conserva las pistas vacías.
Prueba con solo dos tarjetas en un contenedor ancho para ver la diferencia. No elijas uno por costumbre: decide si quieres que los pocos elementos se expandan.
Cómo hacer que una tarjeta ocupe dos columnas
@media (min-width: 48rem) {
.destacada { grid-column: span 2; }
}La regla necesita una cuadrícula que disponga de suficientes columnas en ese ancho. Aplicar un span mayor que el número previsto puede crear pistas implícitas y alterar la distribución. Para este patrón suele ser más sencillo definir explícitamente las columnas en cada tramo.
Grid o Flexbox: cuál conviene
Utiliza Grid cuando las relaciones entre filas y columnas sean importantes. Para una barra de herramientas o una distribución en una sola dirección, Flexbox puede ser más directo. No es necesario elegir una única herramienta para toda la web.
Errores habituales
- Usar una altura fija en tarjetas con textos de distinta longitud.
- Cambiar el orden visual y dejar un recorrido de teclado confuso.
- Sumar anchos en porcentaje y separaciones que superan el contenedor.
- Crear demasiadas columnas en móvil para mantener el diseño de escritorio.
Preguntas frecuentes
¿Necesito una librería?
No. Grid es parte de CSS y el ejemplo no requiere dependencias.
¿Por qué mi cuadrícula no se adapta al móvil?
Revisa los mínimos de las columnas, los anchos de sus hijos y la etiqueta viewport del documento.
Practica cambiando el número de tarjetas y el ancho del contenedor. Puedes comparar este enfoque con los frameworks de CSS o continuar en Aprender CSS.
Referencia técnica: documentación de MDN.
