Ítems Grid CSS
Grid Container dirigió al padre: tracks, gap y defaults de celda. Los ítems grid responden otra pregunta: ¿cómo reclama cada hijo líneas, abarca tracks y anula la alineación dentro de su celda? Domina la colocación por líneas antes de las áreas con nombre.
Una caja de herramientas de ítems grid
📊 Ítems grid de un vistazo
| Propiedad | Trabajo diario |
|---|---|
grid-column |
Define las líneas de inicio/fin de columna del ítem (atajo) |
grid-row |
Define las líneas de inicio/fin de fila del ítem (atajo) |
span |
Estira el ítem a través de N tracks desde la línea de inicio |
justify-self |
Anula justify-items para un ítem (eje inline) |
align-self |
Anula align-items para un ítem (eje block) |
place-self |
Atajo de align-self + justify-self |
Las líneas de grid se numeran desde el borde de inicio. Un ítem que empieza en la línea 1 y termina en la 3 cubre dos tracks de columna. Piensa primero en líneas; las áreas con nombre vienen después.
grid-column — colócalo en líneas de columna
grid-column: start / end fija un hijo entre líneas de columna. Una barra lateral suele ir en el primer track; el panel principal toma el resto.
.board {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}
.board__aside {
grid-column: 1 / 2;
}
.board__main {
grid-column: 2 / 3;
}
span — estírate a través de tracks
span cuenta tracks desde la línea de inicio. Un hero a ancho completo en un tablero de tres columnas suele usar grid-column: 1 / span 3.
.hero {
grid-column: 1 / span 3;
}
grid-row — colócalo en líneas de fila
La misma idea en el eje block. Fija un banner en la franja superior, o deja que una tarjeta alta ocupe dos tracks de fila con span.
.banner {
grid-row: 1 / 2;
}
.tall-card {
grid-row: 2 / span 2;
}
Columna y fila juntas
Combina ambas cuando un hijo necesita un rectángulo claro — por ejemplo un azulejo destacado que abarca dos columnas y una fila.
.feature {
grid-column: 1 / span 2;
grid-row: 1 / 2;
}
place-self — un ítem, otra alineación de celda
Anula justify-items / align-items del contenedor para un solo hijo. place-self: center es un atajo tranquilo cuando ambos ejes deben coincidir.
.board {
display: grid;
justify-items: stretch;
align-items: stretch;
gap: 0.75rem;
}
.board .badge {
place-self: center;
}
Un hábito tranquilo de ítem grid
Coloca primero con líneas de columna y fila, usa span cuando un hijo cubra varios tracks, luego afina la alineación puntual con place-self. Mantén el orden del DOM sensato — evita trucos de order que barajen el foco del teclado. Deja las áreas con nombre de plantilla para Grid Areas.
.shell__hero {
grid-column: 1 / -1;
}
.shell__aside {
grid-column: 1 / 2;
align-self: start;
}
.shell__main {
grid-column: 2 / 3;
}
Pruébalo tú
- Monta un tablero de dos columnas; pon aside en
grid-column: 1 / 2y main en2 / 3. - Añade un hero de tres columnas con
grid-column: 1 / span 3. - Fija un banner con
grid-row: 1 / 2. - Haz que un azulejo destacado abarque dos columnas y una fila.
- Centra un badge con
place-self: centery anota las áreas con nombre para después.
Errores comunes
- Poner
spano números de línea en el contenedor en vez de en un ítem - Olvidar que las líneas empiezan en 1 y contar tracks como si fueran líneas
- Mezclar colocación de ítems con el empaquetado
justify-contentdel padre - Saltar a
grid-template-areascon nombre antes de dominar las líneas - Reordenar con
ordery romper el orden de tab/fuente
Resumen
- Los ítems grid controlan colocación por líneas, span y alineación por ítem
grid-column/grid-rowfijan líneas de inicio y finspanse estira a través de tracks desde una línea de inicioplace-self(y props self) anulan la alineación de celda para un hijo- Las áreas de plantilla con nombre llegan en la lección Grid Areas
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior