Se usó la API de Cloud Translation para traducir esta página.

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.

Se muestran tres tarjetas una al lado de la otra, cada una con tres bits de contenido: encabezado, párrafo y vínculo. Cada una tiene una longitud de texto diferente, lo que crea algunas alineaciones raras en las tarjetas, ya que se ubican una al lado de la otra.

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

Se muestran tres tarjetas una al lado de la otra, cada una con tres elementos de contenido: encabezado, párrafo y vínculo. Cada elemento tiene una longitud de texto diferente, pero la subcuadrícula corrigió las alineaciones, ya que permite que el elemento más alto de cada elemento de contenido establezca la altura de la fila, lo que corrige cualquier problema de alineación.

Navegadores compatibles

Origen

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 */
}

Captura de pantalla de Herramientas para desarrolladores de cuadrícula de CSS, en la que se muestran dos columnas, una al lado de la otra, con un nombre al comienzo de la línea de la columna. — https://codepen.io/web-dot-dev/pen/NWezjXv

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.

De la cuadrícula macro al diseño terminado. Las áreas con nombre de la cuadrícula se crean de antemano y los componentes posteriores se colocan como se desee.

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.

Captura de pantalla de las Herramientas para desarrolladores de la cuadrícula de CSS de Chrome que muestra un diseño de cuadrícula de tamaño móvil en el que las filas y columnas se nombran para una identificación rápida: sangrado completo, estado del sistema, navegación primaria, encabezado principal, pie de página y gestos del sistema.

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.

La misma superposición de cuadrícula de las Herramientas para desarrolladores de CSS que antes, pero esta vez con parte de la IU del sistema para dispositivos móviles, algunas sombras y un poco de color. Ayuda a ver hacia dónde
se dirige el 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.

Captura de pantalla ampliada de la superposición de la cuadrícula de Herramientas para desarrolladores, enfocándose específicamente en los nombres de las columnas con sangrado completo al inicio y al final.

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;
}

El diseño de macro terminado, completo con una imagen anidada de ancho completo que se encuentra correctamente debajo de las filas de encabezado y navegación principales y se extiende a cada una de las líneas de columna con nombre de formato fullbleed. — https://codepen.io/web-dot-dev/pen/WNLyjzX

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.

Vista previa de la captura de pantalla de la insignia de subcuadrícula que se encuentra en los elementos del panel Elementos.

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.