CSS: Grid - Celdas

Cuando se trabaja con el sistema de cuadrículas (grid) en CSS, lo más habitual es crear estructuras bidimensionales, que están compuestas por filas y columnas, por lo que siguen un diseño uniforme. Sin embargo, en ocasiones puede ser necesario realizar ciertos ajustes a las celdas, de forma individualizada. CSS provee una serie de propiedades que permiten crear celdas irregulares.

Con las siguientes propiedades CSS es posible ajustar la posición y el tamaño de las celdas (o ítems) de una cuadrícula CSS:

Mediante estas propiedades es posible modificar los límites de las cuadrículas bidimensionales. Por ejemplo, podemos hacer que una celda tenga una distribución peculiar, alterando su comportamiento natural; es decir, que la celda de un ítem pase a ocupar el espacio de otras celdas, creando una rejilla irregular.

Observando los nombres de las propiedades, se puede distinguir dos pares: dos para las columnas y dos para las filas. Cada uno de estos pares tiene un sufijo para indicar donde empieza el ítem o celda (*-start) y donde termina (*-end). Estas propiedades se asignan directamente sobre el elemento hijo.

Valores

En las propiedades mencionadas se puede usar varios tipos de valores para realizar los ajustes deseados a las celdas. Tabla resumen con los valores:

Mediante un número entero, que puede ser positivo o negativo, se indica la posición dentro de la cuadrícula (grid). La posición es el número de línea que divide la cuadrícula en celdas, contando desde el borde exterior. Se empieza a contar con el número 1; mientras que el número 0 no es válido.

El número de línea puede llevar a confusión cuando se empieza a utilizar. Ten en cuenta que si hay dos celdas habrá tres líneas.

Por ejemplo, con la propiedad grid-row-start y el valor 2 se indica que la celda debe empezar en la segunda línea horizontal de la cuadrícula.

No obstante, el número entero no es el único valor que puede usarse en estas propiedades para designar una posición. En caso de haber designado nombres de línea, podríamos usar los nombres de las líneas.

El valor span se introduce antes de un valor numérico o de un nombre de línea, y permite indicar el número de líneas que hay que extender la celda en cuestión. De esta forma, la celda se alargará hasta la posición indicada. El límite de span para extender celdas es el borde exterior de la cuadrícula.

Con el valor auto se indica que la propiedad no contribuye a modificar la posición del elemento dentro de la cuadrícula (grid). La celda se ubicará de forma automática según la estructura de los elementos HTML.

A continuación se ejemplifica el uso de las propiedades con más detalle.

La propiedad ‘grid-column-start’

Mediante la propiedad grid-column-start se especifica en qué columna de la cuadrícula (grid) debe iniciar un elemento hijo (ítem). En este ejemplo movemos la cuarta celda una posición a la derecha, en la segunda columna.

Código CSS:

.cuadricula {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.item {
  background: salmon;
  border: 1px solid black;
  color: black;
}

.item-4 {
  background: goldenrod;
  grid-column-start: 2;
}

Código HTML:

<div class="cuadricula">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

Resultado:

1

2

3

4

5

6

7

8

9

Tal y como se puede observar, la cuarta celda se ha desplazado a la segunda columna. Esto ha dejado un hueco vacío en su ubicación original. El resto de celdas se desplazaron con el fin de reubicarse.

La propiedad ‘grid-column-end’

Con la propiedad grid-column-end se indica en qué columna de la cuadrícula (grid) debe terminar un elemento. Siguiendo con el ejemplo anterior, se alarga la cuarta celda hasta la columna de su derecha.

Código CSS:

.item-4 {
  background: goldenrod;
  grid-column-start: 2;
  grid-column-end: 4;
}

Resultado:

1

2

3

4

5

6

7

8

9

En este ejemplo, la cuarta celda se ha alargado hasta la siguiente columna. Otra vez, el resto de celdas se han reubicado a continuación.

La propiedad ‘grid-row-start’

Con la propiedad grid-row-start se indica en qué fila de la cuadrícula (grid) debe terminar un elemento. Esta vez, usando el ejemplo anterior se toma la séptima celda y se ubica en la segunda fila. Por eso se reubica en el espacio vacío.

Código CSS:

.item-4 {
  background: goldenrod;
  grid-column-start: 2;
  grid-column-end: 4;
}

.item-7 {
  background: deepskyblue;
  grid-row-start: 2;
}

Resultado:

1

2

3

4

5

6

7

8

9

Como se puede observar, la séptima celda se ha desplazado en la segunda fila, colocándose en el espacio vacío que había dejado la cuarta celda. De este modo, las celdas posteriores se han reubicado a continuación.

La propiedad ‘grid-row-end’

La propiedad CSS grid-row-end permite indicar la fila de la cuadrícula (grid) en qué debe terminar un elemento. Recuperando el ejemplo anterior, se alarga la séptima celda en vertical hasta la parte inferior de la cuadrícula.

Código CSS:

.item-4 {
  background: goldenrod;
  grid-column-start: 2;
  grid-column-end: 4;
}

.item-7 {
  background: deepskyblue;
  grid-row-start: 2;
  grid-row-end: 5;
}

Resultado:

1

2

3

4

5

6

7

8

9

Se puede observar como la séptima celda se ha alargado hasta la última fila de la cuadrícula. Tal y como sucede con los ejemplos anteriores, el resto de celdas se han reubicado a continuación.

Uso del valor ‘span’

La diferencia entre usar un número entero o usarlo acompañado de la palabra clave span, es que el número entero toma como referencia las líneas absolutas de la cuadrícula. Por ejemplo: grid-column-start: 2 y grid-column-end: 4 significa que la celda empieza en la línea 2 y termina en la línea 4.

Al indicar el número entero acompañado de span se está usando un valor relativo. Por tanto: grid-column-start: 2 y grid-column-end: span 2 es equivalente al ejemplo del párrafo anterior. Significa que la celda empieza en la línea 2 y se extiende 2 líneas más allá de esa posición.

Volviendo al ejemplo que hemos estado modificando hasta ahora, vamos a hacer uso del valor span con el objetivo de visualizar la extensión o alargamiento de celdas en una cuadrícula (grid). Para ello, en vez de usar:

• grid-column-end: 4
• grid-row-end: 5

Vamos a usar las siguientes declaraciones:

• grid-column-end: span 2
• grid-row-end: span 3

Código CSS:

.item-4 {
  background: goldenrod;
  grid-column-start: 2;
  grid-column-end: span 2;
}

.item-7 {
  background: deepskyblue;
  grid-row-start: 2;
  grid-row-end: span 3;
}

Resultado:

1

2

3

4

5

6

7

8

9

La propiedad ‘grid-column’

La propiedad grid-column es una abreviatura (shorthand) que unifica las propiedades grid-column-start y grid-column-end. Permite definir el inicio y el final de la colocación de la celda en el eje de las columnas.

Los valores de principio y final de columna se deben separar con una barra inclinada (/). El primer valor será el de inicio y el segundo el del final. Si solo se indica un valor, es el valor de inicio, y entonces la barra inclinada (/) no hace falta.

La propiedad ‘grid-row’

La propiedad grid-row es una abreviatura (shorthand) que unifica las propiedades grid-row-start y grid-row-end. Por tanto, en este caso se puede definir el inicio y el final de la posición de la celda en el eje de las filas.

En esta propiedad sucede lo mismo que en la anterior: los valores de principio y final de fila se separan mediante la barra inclinada (/), siendo el primer valor el de inicio de celda y el segundo el del final. En el caso de indicar un solo valor se estará haciendo referencia al principio, entonces se omite la barra (/).

La propiedad ‘grid-area’

La propiedad grid-area que se describe en el artículo sobre la distribución de elementos en una cuadrícula CSS (grid) también se puede utilizar como abreviatura (shorthand) de todas las propiedades descritas en este artículo.

En este caso, los cuatro valores posibles se deben separar con la barra inclinada (/). El orden de los valores será el siguiente: el comienzo de fila, el comienzo de columna, el final de fila y el final de columna.

Vamos a ver un ejemplo de código CSS:

.ejemplo {
  grid-area: 2 / 1 / span 3 / span 2;
}

Esto significa que la celda empieza en la fila 2 y columna 1, y se extiende 3 filas más abajo y 2 columnas a la derecha.