CSS Grid organiza elementos en filas y columnas. Resulta especialmente útil para rejillas de tarjetas, distribución de una landing y diseños bidimensionales.
La cuadrícula explícita
Activa display:grid en el contenedor y define columnas con grid-template-columns. La unidad fr distribuye el espacio disponible; gap controla la separación. Evita anchos fijos que desborden el móvil.
.tarjetas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 1rem;
}
.tarjetas > * { min-width: 0; }Tarjetas adaptables sin media queries complejas
repeat(auto-fit, minmax(min(100%, 240px), 1fr)) permite colocar tantas columnas como quepan sin que una tarjeta sea más estrecha de lo razonable. Comprueba el resultado con títulos largos y traducciones.
Grid frente a Flexbox
Grid es adecuado para dos dimensiones y composiciones estructuradas. Flexbox funciona bien cuando la distribución se decide principalmente en una dimensión, como una fila de botones. Se pueden combinar sin problema.
Errores al construir tarjetas
Un elemento con min-width:auto puede impedir que el contenido encoja; revisa min-width:0, imágenes adaptables y palabras largas. En diseños complejos, la cuadrícula implícita puede crear filas o columnas no esperadas si colocas elementos fuera de la malla.
Preguntas frecuentes
¿CSS Grid funciona en móviles?
Sí. La solución debe adaptarse mediante columnas flexibles y pruebas con contenido real.
¿Es obligatorio utilizar Bootstrap?
No; CSS Grid forma parte de CSS y puede emplearse sin bibliotecas externas.
Documentación y fuentes de referencia
¿Necesitas ayuda en tu estrategia digital?
Cuéntanos qué necesitas, qué web tienes y qué objetivo quieres alcanzar. Prepararemos una propuesta adaptada al alcance real.
Solicitar información ↗