Posición items
Posicionamiento filas y columnasgrid-row/grid-column

<< Grid Grid por áreas >>

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. 

<< Grid Grid por áreas >>