Nivel de cuadrícula CSS 2: aquí viene la subcuadrícula

Hace más de un año que CSS Grid Layout llegó a la mayoría de nuestros navegadores, y el Grupo de Trabajo de CSS ya está trabajando en el Nivel 2 de la especificación. En este artículo, voy a explicar qué es actualmente parte del borrador de trabajo y del editor de esa especificación. Tenga en cuenta que todo aquí está sujeto a cambios, y nada de esto funciona actualmente en los navegadores. Tome esto como un vistazo al proceso, estoy seguro de que escribiré más piezas prácticas a medida que comencemos a ver cómo toman forma las implementaciones.

Niveles de especificación CSS

Las características de CSS Grid que podemos usar actualmente en los navegadores son las del Nivel 1 de la especificación CSS Grid. Las diversas partes de CSS se dividen en módulos; esta modularización ocurrió cuando CSS pasó de CSS 2.1, por lo que a veces escuchas a la gente hablar de CSS3. En realidad, no hay CSS3. En cambio, había un conjunto de módulos que incluían todas las cosas que ya formaban parte de la especificación CSS2.1. Cualquier CSS que existía en CSS2.1 se convirtió en parte de un módulo de Nivel 3, por lo tanto, tenemos Selectores de CSS Nivel 3, ya que los selectores existían en CSS2.1.

Las nuevas características de CSS que no formaban parte de CSS2.1, como CSS Grid Layout, comienzan en el Nivel 1. La especificación CSS Grid Level 1 es esencialmente la primera versión de Grid. Una vez que un nivel de especificación alcanza el estado de recomendación candidata, no se agregan nuevas funciones importantes. Esto significa que los navegadores y otros agentes de usuario pueden implementar la especificación y puede convertirse en una recomendación W3C. Si se van a diseñar nuevas características, ocurrirán en un nuevo Nivel de la especificación. Estamos en este punto con CSS Grid Layout. La especificación de Nivel 1 está en CR, y se ha creado una especificación de Nivel 2 para trabajar en nuevas características. Sugeriría mirar el Borrador del editor si desea seguir las discusiones sobre especificaciones, ya que contendrá todas las ediciones más recientes.

¿Qué contendrá el nivel 2 de CSS Grid?

En última instancia, la especificación de nivel 2 contendrá todo lo que ya está en el nivel 1 más algunas características nuevas. Si echa un vistazo a la especificación en el momento de la redacción, hay una nota que explica que todo el Nivel 1 debe copiarse una vez que el Nivel 2 llegue a CR.

Entonces podemos esperar encontrar algunas funciones nuevas, y el Nivel 2 de la Especificación de cuadrícula se trata de trabajar con la función de subcuadrícula de CSS Grid. Esta función se eliminó de la especificación del Nivel 1 para dar tiempo a comprender correctamente los casos de uso de la subred y dar más tiempo para trabajar en ella sin demorar el resto del Nivel 1. En el resto de este artículo, Eche un vistazo a la función de subcuadrícula tal como se detalla actualmente en el Borrador del editor. Estamos en una etapa muy temprana con la característica, sin embargo, este es el momento perfecto para seguir y ayudar a dar forma a cómo se desarrolla la especificación. Mi objetivo al escribir este artículo es explicar algunas de las cosas que se discuten, para que pueda comprender y aportar su opinión a las discusiones.

¿Qué es una subred?

Al usar CSS Grid Layout, ya puede anidar cuadrículas. En el siguiente ejemplo, tengo una cuadrícula principal con pistas de seis columnas y pistas de tres filas. Coloqué un elemento en esta cuadrícula desde la línea de columna 2 a la línea 6 y desde la línea de fila 1 a 3. Luego convertí ese elemento en un contenedor de cuadrícula y definí pistas de columna.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: 2fr 1fr 2fr 1fr; }

Las pistas de nuestra cuadrícula anidada no tienen relación con las pistas del padre. Esto significa que si queremos poder alinear las pistas de nuestra cuadrícula anidada con las líneas de la cuadrícula exterior, tenemos que hacer el trabajo y utilizar métodos para calcular el tamaño de las pistas que aseguren que todas las pistas permanezcan iguales. En el ejemplo anterior, las pistas se verán alineadas, hasta que se agregue un elemento de mayor tamaño a una celda de la cuadrícula (haciendo que use más espacio).

Para las columnas, a menudo es posible sortear el escenario anterior, esencialmente restringiendo la flexibilidad de la cuadrícula. Puede hacer que sus columnas de unidad fr minmax(0,1fr) para que ignoren el tamaño del elemento al hacer la distribución del espacio, o puede volver a usar porcentajes. Sin embargo, esto elimina algunos de los beneficios de usar la cuadrícula y, cuando se trata de alinear filas en una cuadrícula anidada, estos métodos no funcionarán.

Digamos que queremos un diseño de tarjeta en el que las tarjetas individuales tengan un encabezado, cuerpo y pie de página. También queremos que el encabezado y el pie de página se alineen en las tarjetas.

 .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .card { display: grid; grid-template-rows: auto 1fr auto; }

Esto funciona siempre que el contenido tenga la misma altura en cada encabezado y pie de página. Si tenemos contenido adicional, la ilusión se rompe y los encabezados y pies de página ya no se alinean en la fila.

Creación de una subcuadrícula

Ahora podemos echar un vistazo a cómo se especifica actualmente la función de subcuadrícula y cómo podría resolver los problemas que he mostrado anteriormente.

Nota : en el momento de escribir este artículo, ninguno de los siguientes códigos funciona en los navegadores. El objetivo aquí es explicar la sintaxis y los conceptos. También es probable que la especificación final cambie a partir de estos detalles. Como referencia, he escrito este artículo basado en el borrador del editor disponible el 23 de junio de 2018.

Para crear una subcuadrícula, tendremos un nuevo valor para grid-template-rows y grid-template-columns . Estas propiedades se utilizan normalmente con una lista de pistas, que define el número y el tamaño de las pistas de fila y columna. Sin embargo, al crear una subcuadrícula, no desea especificar estas pistas. En su lugar, utiliza el valor de la subgrid para decirle a la cuadrícula que esta cuadrícula anidada debe usar la cantidad de pistas y el tamaño de la pista que abarca el área de la cuadrícula que cubre.

En el siguiente código, tengo una cuadrícula principal con pistas de 6 columnas y pistas de 3 filas. La cuadrícula anidada es un elemento de cuadrícula en esa cuadrícula principal y se extiende desde la línea de columna 2 a la línea de columna 6 y desde la línea de fila 1 a la línea de fila 4. Esto es como nuestro ejemplo inicial, sin embargo, ahora podemos verlo usando subred La cuadrícula anidada tiene un valor de subgrid tanto para grid-template-columns como para grid-template-rows . Esto significa que la cuadrícula anidada ahora tiene pistas de 4 columnas y pistas de 2 filas, con el mismo tamaño que las pistas definidas en el padre.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

Esto significaría que cualquier cambio en el tamaño de la pista en el padre sería seguido por la cuadrícula anidada. Una palabra más larga que haga que una de las pistas en la cuadrícula principal sea más ancha dará como resultado que esa pista en la cuadrícula anidada también se vuelva más ancha, por lo que las cosas seguirán alineándose. Esto también funcionaría a la inversa: las pistas de la cuadrícula principal podrían ensancharse según el contenido de la subcuadrícula.

Subcuadrículas unidimensionales

Puede tener una subcuadrícula en una dimensión y especificar el tamaño de la pista en otra. En el siguiente ejemplo, la subcuadrícula solo se especifica en grid-template-columns . La propiedad grid-template-rows tiene una lista de pistas especificada. Por lo tanto, las pistas de la columna permanecerán como las cuatro pistas que vimos arriba, pero las pistas de la fila se pueden definir por separado de las pistas del padre.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; }

Esto significa que las filas de la subcuadrícula se anidarán dentro de la cuadrícula principal, al igual que al crear una cuadrícula anidada hoy. Como nuestra cuadrícula anidada abarca dos filas de la principal, una o ambas filas deberán expandirse para contener el contenido de la subcuadrícula para no causar desbordamientos.

También podría tener una subcuadrícula en una dimensión y la otra dimensión usar pistas implícitas. En el siguiente ejemplo, no especifiqué ninguna pista de fila y di un valor para grid-auto-rows . Las filas se crearán en la cuadrícula implícita con el tamaño que especifiqué y, como en el ejemplo anterior, el padre deberá tener espacio para estas filas o expandirse para contenerlas.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(200px, auto); }

Numeración de líneas y subcuadrícula

Si volvemos a mirar nuestro primer ejemplo, el tamaño de la pista de nuestra subcuadrícula lo dicta el padre en ambas dimensiones. Los números de línea, sin embargo, actúan normalmente en la subcuadrícula. La línea de la primera columna en la dirección en línea es la línea 1, y la línea en el otro extremo de la dirección en línea es la línea -1. No hace referencia a las líneas de la subcuadrícula con el número de línea del padre.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: 2 / 4; grid-row: 2; }

Brechas y subredes

La subcuadrícula heredará cualquier espacio entre columnas o filas establecido en la cuadrícula principal; sin embargo, esto puede ser invalidado por los espacios entre columnas y filas especificados en la subcuadrícula. Si, por ejemplo, la cuadrícula principal tenía un column-gap establecido en 20 px, pero la subcuadrícula tenía column-gap establecido en 0, las celdas de la cuadrícula de la subcuadrícula ganarían 10 px en cada lado para reducir el espacio a 0, con la línea de cuadrícula esencialmente corre por el medio de la brecha.

Ahora podemos ver cómo la subcuadrícula nos ayudaría a resolver el segundo caso de uso del principio de este artículo, el de tener tarjetas con encabezados y pies de página que se alinean a lo largo de las tarjetas.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto 1fr auto; grid-gap: 20px; } .card { grid-row: auto / span 3; /* use three rows of the parent grid */ display: grid; grid-template-rows: subgrid; grid-gap: 0; /* set the gap to 0 on the subgrid so our cards don't have gaps */ }

Nombres de línea y subcuadrícula

Cualquier nombre de línea en su cuadrícula principal se pasará a la subcuadrícula. Por lo tanto, si nombramos las líneas en nuestra cuadrícula principal, podríamos colocar el elemento de acuerdo con esos nombres de línea.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

También puede agregar nombres de línea a su subcuadrícula, las líneas de cuadrícula pueden tener varios nombres de línea, por lo que estos nombres se agregarían a las líneas. Para especificar nombres de línea, agregue una lista de estos nombres después del valor de subgrid de grid-template-columns y grid-template-rows . Si tomamos nuestro ejemplo anterior y también agregamos nombres a las líneas de la subcuadrícula, terminaremos con dos nombres de línea para cualquier línea en la subcuadrícula.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e]; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Pistas implícitas y subcuadrícula

Una vez que haya decidido que una dimensión de su cuadrícula es una subcuadrícula, esto elimina la capacidad de tener pistas implícitas adicionales en esa dimensión. Si agrega más elementos que pueden caber, los elementos adicionales se colocarán en la última pista disponible de la subcuadrícula de la misma manera que los elementos se tratan en cuadrículas demasiado grandes. Un área de cuadrícula creada en la subcuadrícula que abarca más pistas de las disponibles tendrá su última línea establecida en la última línea de la subcuadrícula.

Sin embargo, como se explicó anteriormente, puede hacer que una dimensión de su subcuadrícula se comporte exactamente de la misma manera que una cuadrícula anidada normal, incluidas las pistas implícitas.

Involucrarse en el proceso

El trabajo del Grupo de Trabajo de CSS ocurre en público, en GitHub como cualquier otro proyecto de código abierto. Esto hace que sea algo más fácil de seguir junto con el trabajo que fue todo lo que sucedió en una lista de correo. Puede echar un vistazo a los problemas planteados en el Nivel 2 de la especificación de CSS Grid buscando problemas etiquetados como css-grid-2 en el repositorio de GitHub del Grupo de trabajo de CSS. Si puede contribuir con ideas o un caso de uso para cualquiera de esos problemas, sería bienvenido.

Hay otras características que la gente ha solicitado para CSS Grid Layout, y el hecho de que no se hayan incluido en el Nivel 2 no significa que no se estén considerando. Puede ver los niveles como el lanzamiento de una característica en un producto, solo porque alguna característica no sea parte del sprint actual, no significa que nunca sucederá. El trabajo en las nuevas características de la plataforma web tiende a llevar un poco más de tiempo que el lanzamiento de un producto promedio, pero es un proceso similar.

¿Cuánto tiempo lleva todo esto?

El desarrollo de especificaciones y la implementación del navegador es un proceso iterativo algo circular. No es el caso que la especificación deba estar "terminada" antes de que veamos algunas implementaciones del navegador. Es probable que las implementaciones iniciales estén detrás de los indicadores de características, tal como lo estaba la especificación de cuadrícula original. Esté atento a la aparición de estos, ya que una vez que hay un código para jugar, ¡hace que pensar en estas características sea mucho más fácil!

Espero que este recorrido por lo que podría venir próximamente haya sido interesante. Estoy emocionado de que la función de subcuadrícula esté en marcha, ya que siempre he creído que es vital para un sistema de diseño de cuadrícula completo para la web. Mire este espacio para obtener más noticias sobre el progreso de la función y las implementaciones emergentes del navegador.