Domina CSS Grid: líneas, áreas, auto-placement, subgrid y patrones reales para layouts modernos.
CSS Grid es el sistema de layout ideal para organizar contenido en dos dimensiones: filas y columnas a la vez.
A diferencia de Flexbox (una dimensión), Grid te permite definir estructuras completas de página con precisión.
En esta lección veremos todas sus propiedades clave, usos comunes y subgrid.
Cuándo usar cada uno.
Flexbox es un layout de una dimensión: fila o columna. Es perfecto para barras, menús o componentes en línea.
Grid es bidimensional: puedes controlar filas y columnas al mismo tiempo. Ideal para layouts completos y tarjetas.
En la práctica, se combinan: Grid para la estructura general y Flexbox para alinear componentes internos.
Los bloques básicos del sistema Grid.
Define filas, columnas, áreas y flujo.
display: grid activa el contenedor.
grid-template-columns y grid-template-rows definen la malla base.
La unidad fr reparte el espacio libre entre columnas o filas.
gap controla el espacio entre filas y columnas.
Atajos y tamaños flexibles para la malla.
repeat(n, valor) simplifica patrones repetitivos.
minmax(min, max) define un rango de tamaño para pistas flexibles.
fit-content(límite) ajusta al contenido sin superar un máximo.
Dos comportamientos para grids responsivos.
auto-fill crea columnas vacías si hay espacio sobrante.
auto-fit colapsa esas columnas y expande las ocupadas.
Define el layout de forma visual.
Nombras áreas y dibujas el layout con strings.
Cada item se asigna con grid-area.
Control fino en ejes y celdas.
Colocación, spans y alineación.
grid-column y grid-row controlan en qué líneas empieza y termina un ítem.
Puedes usar span para indicar cuántas columnas/filas ocupa.
grid-area asigna un ítem a una zona definida en el contenedor.
justify-self y align-self permiten alinear un ítem dentro de su celda.
Hereda la malla del contenedor padre.
subgrid permite que un elemento hijo reutilice la definición de filas/columnas del grid padre.
Es ideal para alinear tarjetas internas o secciones con la misma estructura.
Actualmente está soportado en navegadores modernos; revisa compatibilidad si necesitas soporte legacy.
Layouts reales con Grid.
Domina CSS Grid: líneas, áreas, auto-placement, subgrid y patrones reales para layouts modernos.
Código del tema: grid-template-columns: repeat(3, 1fr);
Cuándo usar cada uno.
Flexbox es un layout de una dimensión: fila o columna. Es perfecto para barras, menús o componentes en línea.
Grid es bidimensional: puedes controlar filas y columnas al mismo tiempo. Ideal para layouts completos y tarjetas.
En la práctica, se combinan: Grid para la estructura general y Flexbox para alinear componentes internos.
Los bloques básicos del sistema Grid.
El elemento con display: grid; es el padre directo de toda la cuadrícula.
Los hijos directos del contenedor. Cada uno ocupa celdas de la malla.
Las líneas que delimitan filas y columnas. Se numeran para posicionar items.
El espacio entre dos líneas adyacentes: una fila o una columna.
La celda básica: intersección de una fila y una columna.
Un área rectangular que puede cubrir varias celdas.
Define filas, columnas, áreas y flujo.
display: grid activa el contenedor.
grid-template-columns y grid-template-rows definen la malla base.
La unidad fr reparte el espacio libre entre columnas o filas.
gap controla el espacio entre filas y columnas.
grid-auto-flow define cómo se colocan los ítems automáticamente (row, column, dense).
grid-auto-columns y grid-auto-rows definen el tamaño de pistas automáticas.
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px auto 100px;
gap: 20px;
}Atajos y tamaños flexibles para la malla.
repeat(n, valor) simplifica patrones repetitivos.
minmax(min, max) define un rango de tamaño para pistas flexibles.
fit-content(límite) ajusta al contenido sin superar un máximo.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: fit-content(240px);
}Dos comportamientos para grids responsivos.
auto-fill crea columnas vacías si hay espacio sobrante.
auto-fit colapsa esas columnas y expande las ocupadas.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}Define el layout de forma visual.
Nombras áreas y dibujas el layout con strings.
Cada item se asigna con grid-area.
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }Control fino en ejes y celdas.
Colocación, spans y alineación.
grid-column y grid-row controlan en qué líneas empieza y termina un ítem.
Puedes usar span para indicar cuántas columnas/filas ocupa.
grid-area asigna un ítem a una zona definida en el contenedor.
justify-self y align-self permiten alinear un ítem dentro de su celda.
.card--destacada {
grid-column: 1 / span 2;
grid-row: 1 / 3;
}Hereda la malla del contenedor padre.
subgrid permite que un elemento hijo reutilice la definición de filas/columnas del grid padre.
Es ideal para alinear tarjetas internas o secciones con la misma estructura.
Actualmente está soportado en navegadores modernos; revisa compatibilidad si necesitas soporte legacy.
.layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 16px;
}
.panel {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}Layouts reales con Grid.
Resume como posicionar items con lineas, areas y spans.
Encaja aquí porque ayuda a decidir cuándo ya merece la pena pasar de una dimensión a una rejilla completa.
