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 las filas y los segmentos de columnas creados en una cuadrícula superior solo se pueden utilizar para posicionar elementos secundarios del contenedor de la cuadrícula. Cualquier autor define áreas de cuadrícula con nombre y líneas se perdieron en cualquier otro elemento que no sea un elemento secundario directo. Con subgrid, se pueden compartir el tamaño de los segmentos, las plantillas y los nombres con cuadrículas anidadas. En este artículo, se explica cómo funciona.

Antes de la subcuadrícula, el contenido solía personalizarse manualmente 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 uno tiene una longitud de texto diferente, lo que crea algunas
las alineaciones incómodas en las tarjetas, ya que están 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 bits de contenido:
encabezado, párrafo y vínculo. Cada texto tiene una longitud diferente, pero la subcuadrícula tiene
Se corrigieron las alineaciones permitiendo que el elemento más alto de cada elemento de contenido establezca la fila.
alto, lo que soluciona los problemas de alineación.

Navegadores compatibles

Origen

Conceptos básicos de las subcuadrículas

Este es un caso de uso sencillo en el que se presentan los conceptos básicos de subgrid de CSS. R la 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 ideal para 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 estableciendo 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 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 "macro" a nivel de la página cuadrícula

Los diseñadores suelen trabajar con cuadrículas compartidas, dibujando líneas en todo un diseño, alinear los elementos 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 de macros al diseño terminado. Las áreas con nombre de la cuadrícula se crean por adelantado y, luego, los componentes se colocan como se desea.

Implementar el flujo de trabajo más común en la cuadrícula del diseñador puede brindar un estadísticas sobre las capacidades, los flujos de trabajo y el potencial de subgrid.

A continuación, se muestra una captura de pantalla tomada de las Herramientas para desarrolladores de Chrome de una macro de diseño de página móvil cuadrícula. Las líneas tienen nombres y hay áreas claras para colocar los componentes.

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

El siguiente CSS crea esta cuadrícula, con filas y columnas con nombre para el 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 dónde se encuentra
el diseño de un producto.

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

Captura de pantalla en primer plano de la superposición de cuadrícula de DevTools, que se enfoca específicamente en los nombres de las columnas fullbleed-start y fullbleed-end.

Con el diseño general del dispositivo creado con filas y columnas con nombres agradables, usa subgrid para pasar las filas y columnas bien nombradas a diseños de cuadrícula anidados. Esta es ese momento mágico de subgrid. El diseño del dispositivo pasa las filas con nombre y al contenedor de la app, que luego la pasa a cada uno de sus hijos o hijas.

.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 las columnas que abarca el elemento 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 a los elementos secundarios de .app, en lugar de solo .app. Se agregaron los elementos de .app No se puede hacer referencia a los recorridos de la cuadrícula creados por .device antes de la subcuadrícula.

Con todo esto definido, la imagen anidada puede tener sangrado completo en los gracias a subgrid. Sin valores negativos ni trucos, sino una sola línea que dice “mi diseño abarca de fullbleed-start a fullbleed-end”.

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

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

Ahí lo tienes, una cuadrícula de macros como la usan los diseñadores, implementada en CSS. Este concepto puede escalar 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 del paréntesis, pregunta al navegador si entendió subcuadrícula como valor para columnas o filas de plantilla. En el siguiente ejemplo, se verifica si la propiedad grid-template-columns admite la palabra clave subgrid, que si true, significa que la subcuadrícula puede utilizarse

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

Devtools

Chrome, Edge, Firefox y Safari tienen excelentes Herramientas para desarrolladores de cuadrícula 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 de Elements
panel.

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.