Subcuadrícula CSS: características, sintaxis y el problema que esto resolverá

() translation by (you can also view the original English article)

La subcuadrícula CSS se está abriendo paso lentamente en los navegadores. El Equipo de Trabajo de CSS está trabajando activamente en ello y la especificación relacionada de W3C ya ha alcanzado el Nivel 2. Esta nueva característica nos permitirá mejorar los elementos de la cuadrícula con subcuadrículas que heredan las guías de la cuadrícula principal y se alinean perfectamente con ella.

Dado que los navegadores aún no implementan la subcuadrícula CSS, este artículo ofrece solo una descripción general de alto nivel de las próximas funciones. Es probable que Firefox Nightly implemente Subgrid pronto donde puedas experimentar con él. Ten en cuenta que las especificaciones aún no están finalizadas, por lo que las características aún pueden cambiar en el futuro.

El problema que resuelve la subcuadrícula CSS: Herencia

Solo los hijos directos del contenedor de cuadrícula se convierten en partes del diseño de la cuadrícula CSS. Los elementos secundarios de los elementos de la cuadrícula no heredan el diseño de la cuadrícula. En lugar de display: grid, su propiedad display por defecto será block o inline, dependiendo de si son elementos de tipo bloque o elementos en línea.

Los elementos nietos que no forman parte de la cuadrícula tienen varias ventajas. Por ejemplo, son libres de implementar otro módulo de diseño, como flexbox, o su propia cuadrícula independiente con diferentes reglas de alineación.

Sin embargo, en muchos casos, es posible que desees crear una subcuadrícula que herede filas, columnas y líneas de la cuadrícula principal. Usando la redacción más precisa del Grupo de Trabajo CSS:

"... un eje subcuadrado es uno que hace coincidir sus líneas de cuadrícula con las líneas de la cuadrícula del elemento principal ..."

"... deriva el tamaño de sus guías a través de esta integración con la cuadrícula principal".

En este momento, solo podemos imitar el comportamiento de una subcuadrícula usando cuadrículas anidadas. Sin embargo, si bien la próxima subcuadrícula CSS tendrá las mismas pistas de cuadrícula que su cuadrícula principal, este no es el caso con las cuadrículas anidadas disponibles actualmente.

Veamos un ejemplo para comprender mejor cómo las cuadrículas anidadas y la subcuadrícula CSS son diferentes entre sí.

1. Cuadrícula anidada

Aquí hay una cuadrícula anidada muy simple:

<div class="grid">
  <div class="nested-grid">
    <div class="item"></div>
  </div>
</div>

El contenedor externo .grid tiene cinco columnas y tres filas. Establecí su altura en 300px para que también pueda usar unidades de fracción para las filas de la cuadrícula:

.grid {
  background-color: deepskyblue;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

La cuadrícula anidada ocupa tres columnas (entre las líneas de columna de la cuadrícula 2 y 5) y dos filas (entre las líneas de fila de la cuadrícula 1 y 3). También hereda grid-template-columns y grid-template-rows de la grilla exterior:

.nested-grid {
  background-color: mediumblue;
  grid-column: 2 / 5;
  grid-row: 1 / 3;
  display: inherit;       
  grid-template-columns: inherit;
  grid-template-rows: inherit;
}

El elemento dentro de la cuadrícula anidada ocupa una columna (entre las líneas de columna de la cuadrícula 2 y 3) y dos filas (entre las líneas de fila de la cuadrícula 1 y 3; la regla se hereda de .nested-grid):

.item {
  background-color: black;
  grid-column: 2 / 3;
  grid-row: inherit;  
}

Ahora, si activas el inspector de cuadrícula dentro de las herramientas de desarrollador de tu navegador, verás el problema de inmediato. Aunque la cuadrícula anidada hereda el tamaño de la fila y la columna de la cuadrícula principal, las pistas de las dos cuadrículas siguen siendo independientes entre sí:

La cuadrícula principal tiene cinco columnas de igual ancho y tres filas de igual altura:

La cuadrícula anidada también tiene cinco columnas de igual ancho y tres filas de igual altura, sin embargo, son completamente independientes de las filas y columnas de la cuadrícula principal:

Además de esto, el elemento .item usa las pistas de la cuadrícula interna en lugar de la externa.

Con la subcuadrícula CSS, podremos lograr un resultado diferente. La subcuadrícula utilizará las pistas de la cuadrícula principal sobre el área que abarca, por lo que solo habrá un conjunto de pistas, utilizado por ambas cuadrículas.

2. Simulación de subcuadrícula (aún con una cuadrícula anidada)

Dado que los navegadores aún no implementan la subcuadrícula CSS, he creado una simulación de subcuadrícula que utiliza la sintaxis disponible actualmente para lograr un comportamiento similar (pero no exactamente el mismo) que la subcuadrícula que viene.

Sin embargo, hay una diferencia importante entre la simulación y la subcuadrícula real. Aunque la simulación crea una cuadrícula interna que parece tener las mismas pistas de cuadrícula que la cuadrícula principal, siguen siendo dos cuadrículas independientes que no están vinculadas entre sí.

Por ejemplo, si un elemento más grande desborda una fila o columna dentro de la subcuadrícula simulada, las líneas de cuadrícula correspondientes se alejarán de sus lugares originales. También se hará visible que la subcuadrícula simulada es completamente independiente de la cuadrícula principal, ya que no se moverán juntas (como lo hará la subcuadrícula real).

El marcado para la subcuadrícula simulada es el mismo que antes:

<div class="grid">
  <div class="subgrid">
    <div class="item"></div>
  </div>
</div>

El CSS que pertenece a la cuadrícula principal también es el mismo, sin embargo, he creado una variable --gridheight para que luego pueda calcular los tamaños de las pistas de la cuadrícula interna:

:root {
--gridheight: 300px;
}
.grid {
  background-color: deepskyblue;
  height: var(--gridheight);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

La subcuadrícula se extiende sobre la misma área que antes, definida por las reglas grid-column: 2 / 5; y grid-row: 1 / 3;.

La propiedad grid-template-columns define tres columnas en lugar de cinco, ya que queremos colocar las columnas de la subcuadrícula exactamente sobre las columnas de la cuadrícula principal.

La propiedad grid-template-rows tiene una regla calc() bastante fea que simula la ubicación de las filas de la cuadrícula principal. Primero, calculamos los dos tercios de --gridheight, ya que la subcuadrícula abarca solo dos filas en lugar de tres (definidas por la regla grid-row). Luego, lo dividimos por 2, ya que la subcuadrícula se debe dividir en dos filas de igual altura.

.subgrid {
  background-color: mediumblue;
  grid-column: 2 / 5;
  grid-row: 1 / 3;  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, calc((var(--gridheight) * 2 / 3) / 2));
}

Para el elemento .item, usamos las mismas reglas que antes, para poder comparar cómo cambia el área cubierta:

.item {
  background-color: black;
  grid-column: 2 / 3;
  grid-row: inherit; 
}

¡Y ya está! El Inspector de cuadrícula muestra que la subcuadrícula simulada tiene exactamente las mismas líneas de cuadrícula que la cuadrícula principal:

Subgrid simulation grid tracks

La cuadrícula principal todavía tiene cinco columnas de igual ancho y tres filas de igual altura como antes:

Pero ahora, las líneas de la cuadrícula interna son idénticas a las líneas de la cuadrícula principal:

La forma del elemento .item también ha cambiado. Como la cuadrícula interna ahora tiene solo dos filas, .item abarca toda la altura de la subcuadrícula, ya que se ha definido para cubrir dos filas entre las líneas 1 y 3 (grid-row: 1 / 3;).

Probablemente haya notado que las cuadrículas internas y externas usan números de línea diferentes. La subcuadrícula entrante también contará las líneas de cuadrícula de la misma manera. Esto comenzará a contar sus propias líneas de cuadrícula desde el número 1 sobre el área que abarca. Como resultado, no tendremos que rastrear los números de línea de la cuadrícula principal, por lo que será más fácil colocar elementos en la subcuadrícula.

Sintaxis de la subcuadrícula CSS

Subcuadrículas bidimensionales

Las subcuadrículas bidimensionales heredan tanto las filas como las columnas de la cuadrícula principal. Por lo tanto, debemos asignar el valor subgrid a las propiedades grid-template-columns y grid-template-rows. Así es como se vería el código anterior con la nueva sintaxis de subcuadrícula:

.subgrid {
  background-color: mediumblue;
  grid-column: 2 / 5;
  grid-row: 1 / 3;  
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

La nueva sintaxis nos ahorrará mucho tiempo, ya que no tendremos que calcular los valores de grid-template-columns y grid-template-rows. Además, la subcuadrícula estará vinculada a la cuadrícula principal, ya que utilizarán las mismas pistas de cuadrícula. Entonces, si agregamos un elemento más grande a la cuadrícula principal o a la subcuadrícula, sus pistas crecerán juntas.

Subcuadrículas unidimensionales

Probablemente la mejor característica de la subcuadrícula CSS es que no necesariamente tendremos que usarlo en dos dimensiones, pero también podemos crear subcuadrículas de solo columnas y solo de filas.

1. Subcuadrículas de solo columna

Las subcuadrículas de solo columna heredan solo las columnas de la cuadrícula principal, pero las filas se definen de forma independiente. Por lo tanto, solo necesitamos asignar el valor subgrid a la propiedad grid-template-columns. Por ejemplo:

.subgrid {
  background-color: mediumblue;
  grid-column: 2 / 5;
  grid-row: 1 / 3;  
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 1fr 2fr 3fr;
}

Las columnas de la subcuadrícula utilizan las pistas y las líneas de cuadrícula de la cuadrícula principal, mientras que las filas se comportan como entidades separadas.

2. Subcuadrículas de solo fila

Del mismo modo, las subcuadrículas de solo filas solo heredan las filas de la cuadrícula principal, pero las columnas se definen por separado. En este caso, solo necesitamos usar el valor de subgrid en la propiedad grid-template-rows. Por ejemplo:

.subgrid {
  background-color: mediumblue;
  grid-column: 2 / 5;
  grid-row: 1 / 3;  
  display: grid;
  grid-template-columns: 3fr 2fr 1fr;
  grid-template-rows: subgrid;
}

Tener acceso a las subcuadrículas unidimensionales hará que la subcuadrícula CSS sea bastante flexible y podemos esperar ver muchos casos de uso interesantes en el futuro.

Características de la subcuadrícula CSS

La subcuadrícula CSS tiene múltiples funciones que puedes examinar en la documentación del Nivel 2 del Módulo de diseño de cuadrícula. Para ahorrarte tiempo, estas son las características más importantes de la subcuadrícula CSS (ten en cuenta que aún podrían cambiar en el futuro):

La subcuadrícula CSS...

hereda las líneas de cuadrícula con nombre de la cuadrícula principal,
hereda las áreas de cuadrícula con nombre de la cuadrícula principal,
hereda los espacios de la cuadrícula principal,
puede definir sus propias líneas de cuadrícula con nombre que se agregarán a las líneas de cuadrícula con nombre del elemento primario,
puede definir sus propias áreas de cuadrícula con nombre que se agregarán a las áreas de cuadrícula con nombre del padre,
puede anular los espacios heredados,
comienza a contar los números de línea desde 1 (ya mencionado anteriormente).

Conclusión

La subcuadrícula CSS todavía está en desarrollo, pero podemos esperar que sea adoptada por las versiones preliminares de los navegadores en un futuro próximo. Esta nueva característica altamente demandada permitirá a los hijos de elementos de la cuadrícula heredar el diseño de cuadrícula de sus abuelos, ya sea en dos (filas y columnas) o en una (filas o columnas).

Aprende más

Aunque los casos de uso de la subcuadrícula CSS aún no se han explorado por completo, aquí hay dos excelentes artículos donde puedes encontrar problemas de diseño del mundo real que puedes resolver:

Rachel Andrew explica cómo alinear verticalmente encabezados y pies de página de diferentes alturas,
Ken Bellows muestra cómo alinear iconos de diferentes anchos horizontalmente usando la subcuadrícula CSS.