Hasta este capítulo, salvo algunas excepciones como justify-self, align-self o grid-area, tan sólo hemos visto propiedades CSS que se aplican solamente al contenedor padre de una cuadrícula. A continuación, vamos a ver ciertas propiedades que en su lugar, se aplican a cada ítem hijo de la cuadrícula, para alterar o cambiar el comportamiento específico de dicho elemento, que no se comporta como la mayoría.
Algunas de las propiedades vistas hasta ahora son las siguientes.
| Propiedad | Descripción |
|---|---|
justify-self |
Altera la justificación del ítem hijo en el eje horizontal. |
align-self |
Altera la alineación del ítem hijo en el eje vertical. |
grid-area |
Indica un nombre al área especificada, para su utilización con grid-template-areas. |
Sin embargo, existen algunas propiedades más, referentes en este caso, a la posición de los hijos de la cuadrícula donde va a comenzar o terminar una fila o columna. Las propiedades son.
| Propiedad | Descripción |
|---|---|
grid-column-start |
Indica en que columna empezará el ítem de la cuadrícula. |
grid-column-end |
Indica en que columna terminará el ítem de la cuadrícula. |
grid-row-start |
Indica en que fila empezará el ítem de la cuadrícula. |
grid-row-end |
Indica en que fila terminará el ítem de la cuadrícula. |
Con dichas propiedades, podemos indicar el siguiente código CSS sobre el primer ítem de una cuadrícula de 4 ítems.
Ejm
.grid {
display: grid;
}
.a {
grid-column-start: 1;
grid-column-end: 2;
}
De esta forma, tenemos una cuadrícula de 4 elementos, en el que indicamos la posición del ítem 1 (elemento con clase.a): comenzando en la columna 1 y acabando en el inicio de la columna 2.
Ese sería el funcionamiento normal. Donde se ve la utilidad de estas propiedades, es si variamos los valores de forma que tomen posiciones diferentes, como por ejemplo, si indicamos que el ítem 1 debe comenzar en la columna 1, pero acabar en la columna 3 (ocupando la hipotética primera y segunda celda).
En este nuevo ejemplo, comenzamos el primer ítem en la columna 2 y lo acabamos al principio de la columna 3, por lo que la celda permanecerá en la posición de la segunda columna. Además, añadimos la propiedad grid-row-start que hace lo mismo que hasta ahora, pero con las filas. En este caso, le indicamos que comience en la fila 3, por lo que el ítem 1 se desplaza a una nueva fila de la cuadrícula, dejando en la anterior el ítem 4.
También es posible utilizar la palabra clave span seguida de un número, que indica que abarque hasta esa columna o celda.
Atajo: grid-column y grid-row
El módulo grid de CSS proporciona las propiedades de atajo grid-column y grid-row donde se nos permite escribir en un formato abreviado las propiedades anteriores. Su sintaxis sería la siguiente.
.grid {
display: grid;
}
.a {
/* grid-column: <grid-column-start> <grid-column-end> */
/* grid-row: <grid-row-start> <grid-row-end> */
grid-column: auto;
grid-column: 4 / 6;
grid-column: span 3;
grid-column: span 3 / 6;
}
Nota: La especificación de Grid CSS ya tiene buen soporte en la actualidad y puede utilizarse en producción. Eso sí, si requieres soporte para navegadores antiguos, sé cuidadoso.