Define columnas, filas, huecos y alineación en la barra lateral, observa el layout actualizarse en tiempo real, luego copia el CSS de grid listo para producción. CSS Grid es el sistema de layout bidimensional más potente disponible en CSS.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
grid-template-rows: auto;
gap: 16px;
}
/* Unidad fr = fracción del espacio disponible */
grid-template-columns: 1fr 2fr 1fr; /* izquierda, centro ancho, derecha */
.item {
grid-column: 1 / 3; /* abarca columnas 1-2 */
grid-row: 1 / 2; /* abarca fila 1 */
}
/* Abarcando varias columnas */
.wide { grid-column: span 2; }
Usa Grid para layouts bidimensionales (filas y columnas simultáneamente). Usa Flexbox para layouts unidimensionales (solo fila o solo columna). Grid es mejor para layouts de página; Flexbox para componentes.
La unidad fr representa una fracción del espacio disponible en el contenedor. grid-template-columns: 1fr 2fr crea dos columnas donde la segunda es el doble de ancha que la primera.
Usa grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Las columnas se ajustan automáticamente según el espacio disponible — sin media queries necesarias.