Subcuadrícula CSS

La cuadrícula de CSS es un motor de diseño muy potente, pero los segmentos de filas y columnas creados en una cuadrícula superior solo se pueden usar para posicionar elementos secundarios directos del contenedor de cuadrícula. Las líneas y áreas de cuadrícula con nombre definidas por el autor se perdieron en cualquier otro elemento que no fuera un elemento secundario directo. Con subgrid, el tamaño, las plantillas y los nombres de los segmentos se pueden compartir con cuadrículas anidadas. En este artículo, se explica cómo funciona.

Antes de la subcuadrícula, el contenido a menudo se adaptaba a mano para evitar diseños irregulares como este.

Después de la subcuadrícula, es posible alinear el contenido de tamaño variable.

Conceptos básicos de la subcuadrícula

Este es un caso de uso sencillo en el que se presentan los conceptos básicos de subgrid de CSS. Una cuadrícula se define con dos columnas con nombre, la primera tiene 20ch de ancho y la segunda es “el resto” del espacio 1fr. Los nombres de las columnas no son obligatorios, pero son ideales con fines ilustrativos y educativos.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

Luego, un elemento secundario de esa cuadrícula, que abarca esas dos columnas, se establece como un contenedor de cuadrícula y adopta las columnas de su elemento superior configurando grid-template-columns como subgrid.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}

Eso es todo, las columnas de una cuadrícula superior se pasaron efectivamente a un nivel inferior a una subcuadrícula. Esta subcuadrícula ahora puede asignar elementos secundarios a cualquiera de esas columnas.

Desafío Repite la misma demostración, pero hazlo para grid-template-rows.

Comparte una cuadrícula "macro" a nivel de la página

Los diseñadores suelen trabajar con cuadrículas compartidas, dibujan líneas sobre un diseño completo y alinean cualquier elemento que quieran. ¡Ahora los desarrolladores web también pueden hacerlo! Ahora se puede lograr este flujo de trabajo exacto y muchos más.

La implementación del flujo de trabajo de cuadrícula de diseño más común puede proporcionar excelentes estadísticas sobre las capacidades, los flujos de trabajo y las posibilidades de subgrid.

Esta es una captura de pantalla tomada de Chrome DevTools de una cuadrícula de macro de diseño de página para dispositivos móviles. Las líneas tienen nombres y hay áreas claras para colocar los componentes.

El siguiente CSS crea esta cuadrícula, con filas y columnas con nombre para el diseño del dispositivo. Cada fila y columna tiene un tamaño.

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

Algunos estilos adicionales aportan el siguiente diseño.

Dentro de este elemento superior, hay varios elementos anidados. El diseño requiere una imagen de ancho completo debajo de las filas de navegación y encabezado. Los nombres de las líneas de la columna más a la izquierda y a la derecha son fullbleed-start y fullbleed-end. Nombrar las líneas de cuadrícula de esta manera permite que los elementos secundarios se alineen entre sí simultáneamente con la abreviatura de posición de fullbleed. Es muy conveniente, como pronto verás.

Con el diseño general del dispositivo creado con filas y columnas con nombres adecuados, usa subgrid para pasar las filas y columnas con nombres adecuados a los diseños de cuadrícula anidados. Ese es el momento mágico de subgrid. El diseño del dispositivo pasa las filas y columnas con nombre al contenedor de la app, que luego la pasa a cada uno de sus elementos secundarios.

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

La subcuadrícula de CSS es un valor que se usa en lugar de una lista de segmentos de cuadrícula. Las filas y columnas que el elemento abarca desde su elemento superior ahora son las mismas filas y columnas que ofrece. Esto hace que los nombres de línea de la cuadrícula .device estén disponibles para los elementos secundarios de .app, en lugar de solo .app. Los elementos dentro de .app no podían hacer referencia a los seguimientos de cuadrícula creados por .device antes de la subcuadrícula.

Con todo esto definido, la imagen anidada ahora puede tener sangrado completo en el diseño gracias a subgrid. Sin valores negativos ni trucos, es mejor una frase que diga "mi diseño abarca de fullbleed-start a fullbleed-end".

.app > main img {
    grid-area: fullbleed;
}

Ahí lo tienes, una cuadrícula macro como la que usan los diseñadores, implementada en CSS. Este concepto puede escalarse y crecer contigo según sea necesario.

Verifica la compatibilidad

La mejora progresiva con CSS y subcuadrícula es conocida y directa. Usa @supports y, dentro de los paréntesis, pregúntale al navegador si comprende la subcuadrícula como un valor para las columnas o filas de la plantilla. En el siguiente ejemplo, se verifica si la propiedad grid-template-columns admite la palabra clave subgrid; si es "true", esto significa que se puede usar la subcuadrícula.

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Herramientas para desarrolladores

Chrome, Edge, Firefox y Safari tienen excelentes herramientas de DevTools para cuadrículas de CSS, y Chrome, Edge y Firefox tienen herramientas específicas para ayudar con la subcuadrícula. Chrome anunció sus herramientas en 2015, mientras que Firefox las tiene desde hace un año o más.

La insignia de subcuadrícula funciona como la insignia de cuadrícula, pero distingue visualmente qué cuadrículas son subcuadrículas y cuáles no.

Recursos

Esta lista es una compilación de artículos, demostraciones y fuentes de inspiración general sobre las subcuadrículas para comenzar. Si buscas el siguiente paso en tu educación sobre subredes, diviértete explorando todos estos excelentes recursos.

• MDN
• Rachel Andrew con subtítulos alineados
• Rachel Andrew con 10 ejemplos geniales
• Rachel Andrew con un sitio de ejemplos
• Artículo de Ahmad Shadeed
• Michelle Barker en CSS Day 2022
• Tarjetas
  • CodePen de Jhey
  • Codepen de Ahmad Shadeed
  • Codepen de Takeshi Kano
  • CodePen de Arvid
  • CodePen de Chris Coyier
  • Codepen de Miriam Suzanne
• Chris Coyier con formularios
• Facundo Corradini con alineación de forma
• Chris Coyier con la alineación de los marcadores de elementos de la lista
• Michelle Barker sale del contenedor para alinearse con la cuadrícula principal
• Miriam Suzanne muestra nombres de líneas nombradas e interacciones de subcuadrícula
• Kevin Powell, menciona los conceptos básicos del área
• Kevin Powell con listas alineadas
• Shannon Moeller con listas alineadas
• Kevin Powell con una cuadrícula a nivel de la página que se transmite a los componentes
• Elad Shechter con una superposición de devtool y un resguardo
• Aaron Iker con un buen uso tipográfico de la subcuadrícula para la alineación de referencia de las notas al pie
• Adam Argyle con una imagen a todo ancho en un artículo