itemtype='https://schema.org/WebPage' itemscope='itemscope' class="page-template-default page page-id-3197 page-child parent-pageid-3152 ast-desktop ast-separate-container ast-right-sidebar astra-4.6.14 ast-single-post ast-inherit-site-logo-transparent ast-hfb-header ast-normal-title-enabled">

11. Propiedades para ítems hijos

Hasta este capítulo, salvo algunas excepciones como justify-selfalign-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.

Propiedades para ítems hijos

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).

Propiedades para ítems hijos 2

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.

Propiedades para ítems hijos 3

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.

Scroll al inicio