¿Qué queremos de Grid?

Nos sentimos mimados con la cuadrícula CSS por un minuto. Llegó caliente y rápido a todos los principales navegadores al mismo tiempo. Ahora que vemos un uso mucho mayor, vemos que la gente quiere más de la red.

Michelle Barker enumera sus deseos (y después escribiré mi comentario):

• Diseñar espacios entre filas y columnas. También escuché que se le solicitó aplicar estilo a las celdas de la cuadrícula directamente, en lugar de tener que colocar un elemento allí y aplicarle estilo.
• Múltiples valores de brecha . Quería esto la otra semana y me dijeron que usara una columna o fila vacía en lugar de un espacio. El tamaño de esa columna se puede controlar y las cosas se colocan en consecuencia para tratarla como un espacio. Más o menos bien, excepto que no es particularmente amigable con las grillas implícitas.
• Patrones de flujo automático . Esto es inteligente. Consulte el caso de uso y la propuesta de Michelle.
• calc()con la frunidad . Esto es una locura. Puedo ver que quiero hacer algo como esto calc(1fr - 100px), pero ¿no es el espacio tan grande como 100 px corto y 1 fr recalculado para llenar ese espacio? Parece una locura infinita.
• Celdas de cuadrícula de relación de aspecto . Sospecho que, si conseguimos esto, será una solución genérica de relación de aspecto que funcionará en cualquier elemento, incluidos los elementos colocados en una cuadrícula.

Subgrid también está empezando a recibir una gran solicitud y puedo ver por qué. Mientras creaba el último diseño de página que hice usando la cuadrícula, descubrí que deseaba mucho poder compartir las líneas generales de la cuadrícula de la página dentro de los subelementos.

Rachel Andrew habló sobre su estado hace unos seis meses en CSS Grid Level 2: Here Comes Subgrid . No estoy seguro de dónde se encuentra ahora, pero no creo que ningún navegador lo admita todavía. (Ni siquiera estoy seguro de si la especificación está técnicamente completa).

Brad destacó el deseo aquí:

Las consultas de contenedores y las subcuadrículas harían que mi sistema de diseño funcione mucho más fácilmente.

Define una cuadrícula y coloca algunos componentes allí, luego observa cómo encajan en su lugar en la cuadrícula principal y se ven geniales sin importar cuáles sean las dimensiones del contenedor.

– Brad Frost (@brad_frost) 11 de febrero de 2019

Y Ken Bellows escribe:

• Si combinamos la subcuadrícula con grid-template-areasel interior de las tarjetas (lea mi última publicación si no conoce las Áreas de cuadrícula, le dejará boquiabierto), los diseños complejos basados ​​​​en tarjetas responsivas se vuelven triviales.
• La perspectiva de una subcuadrícula en ambos ejes nos brinda una manera de lograr un posicionamiento relativo a la cuadrícula, al menos para elementos agrupados semánticamente, ¡como desearía haberlo hecho arriba! ¡Agrupe sus cosas en un contenedor, coloque su contenedor en la cuadrícula, convierta ese contenedor en una subcuadrícula en ambos ejes y declare sus pistas en relación con la posición de la cuadrícula del elemento de subcuadrícula!
• Entre Flexbox, Grid display: contentsy subgrids, finalmente tendremos todo lo que necesitamos para escribir un marcado semántico, limpio y muy delgado, básicamente sin elementos innecesarios ni puramente estructurales. ¡Será una gran ayuda para la accesibilidad, el SEO y simplemente para los desarrolladores que intentan comprender su marcado!

Eric Meyer calificó la subcuadrícula como una característica esencial hace tres años:

Es por eso que llegó a la misma conclusión que ya tienen otros expertos en grillas (como Rachel): las subcuadrículas son un componente importante del diseño de la grilla y deben ser parte de cualquier implementación del diseño de la grilla cuando emerge del estado de vista previa del desarrollador. Si eso significa retrasar la aparición de redes, creo que vale la pena.

Y, por supuesto, todo el mundo quiere todavía mampostería nativa.