Posición items
Posicionamiento filas y columnas
Por defecto, los elementos se colocan de izquierda a derecha y de arriba a abajo ocupando cada uno una celda de la rejilla.
Si queremos cambiar la ubicación, podemos utilizar la siguientes propiedades:
- grid-column-start: Indica en qué columna empezará el ítem de la cuadrícula
- grid-column-end: Indica en qué columna terminará el ítem de la cuadrícula
- grid-row-start: Indica en qué fila empezará el ítem de la cuadrícula
- grid-row-end: Indica en qué fila terminará el ítem de la cuadrícula
.item1{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
.item2{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.item3{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.item4{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}grid-row/grid-column
Como atajo al posicionamiento anterior, podemos utilizar la notación grid-row/grid-column, su sintaxis es: grid-row: <grid-row-start> / <grid-row-end>; y lo mismo sería con las columnas: grid-column: <grid-column-start> / <grid-column-end>; El ejemplo anterior, quedaría:
.item1{
grid-column: 3/4;
grid-row: 3/4;
}
.item2{
grid-column: 1/2;
grid-row: 1/2;
}
.item3{
grid-column: 3/4;
grid-row: 1/2;
}
.item4{
grid-column: 2/3;
grid-row: 2/3;
}Nota: Cuando ocupa sólo una fila o una columna el / <grid-XXX-end>; puede omitirse. El ejemplo anterior quedaría:
.item1{
grid-column: 3;
grid-row: 3;
}
.item2{
grid-column: 1;
grid-row: 1;
}
.item3{
grid-column: 3;
grid-row: 1;
}
.item4{
grid-column-start: 2;
grid-row-start: 2;
}¡IMPORTANTE! Un contenido puede ser contenedor a su vez, es decir, si tratamos grid como una tabla, dentro de una celda podemos crear otra tabla a su vez.
Los valores que podemos indicarle a las propiedades grid-column-start, grid-column-end, grid-row-start y grid-row-end además de un número o auto, puede ser una línea con nombre (como veremos en el siguiente punto) o un número precedido de la palabra reservada span, que corresponde a cuántas líneas debemos alargar cada celda. Ejemplo:
.item1{
grid-column: 2/ span 2;
grid-row: 3;
}En este ejemplo el primero empieza en la línea 2 hasta la 4, es decir que ocupa las celdas 2-3 y 3-4.