CSS
Controla la ubicación de elementos en CSS Grid mediante líneas, spans, nombres, grid-template-areas y el algoritmo de colocación automática.
Grid coloca items entre lines y permite nombrar líneas o áreas para expresar la estructura.
.sidebar {
grid-column: 1 / 2;
grid-row: 1 / -1;
}.item {
grid-column: 2 / 4;
grid-row: 1 / 3;
}Inicio inclusivo y final en la línea posterior al área ocupada.
.item {
grid-column: span 2;
}Ocupa dos tracks desde la posición automática o explícita.
.item {
grid-column: 1 / -1;
}-1 representa la última línea de la grid explícita, no necesariamente de tracks implícitos posteriores.
grid-template-columns:
[sidebar-start] 16rem
[sidebar-end content-start] 1fr
[content-end];main {
grid-column: content-start / content-end;
}Los nombres comunican intención mejor que números en layouts grandes.
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 16rem 1fr;
}header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Cada área debe formar un rectángulo continuo.
grid-template-areas:
"sidebar main"
". main";El punto representa una celda sin área nombrada.
.layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
@media (width >= 60rem) {
.layout {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
}Reordenar visualmente áreas puede divergir del DOM. Mantén un orden fuente usable.
.media,
.content {
grid-area: 1 / 1;
}Grid permite superponer items. Z-index y painting order deciden cuál aparece delante.
No uses overlap para esconder contenido interactivo o crear lectura ambigua.
Los items colocados consumen espacio y el algoritmo ubica los demás alrededor. dense puede rellenar huecos con items posteriores.
¿Qué ocupa grid-column: 1 / -1?
Desde la primera hasta la última línea de la grid explícita, cubriendo todos sus column tracks.
Grid responsive con minmax, auto-fit y auto-fill adapta tracks al espacio disponible.