El año pasado pregunté: “¿Acoplaremos nuestro HTML para las cuadrículas CSS?”
El problema es que la única forma de que los elementos participen en la misma cuadrícula CSS juntos (o flexbox para el caso) es que sean hermanos. Entonces, en algunos casos, podríamos estar incentivados a renunciar a la semántica HTML en beneficio del diseño (no muy bien).
Una respuesta a esto es display: contents;: Un nuevo valor de visualización mágico que esencialmente hace que el contenedor desaparezca, haciendo que los elementos secundarios del elemento pasen al siguiente nivel en el DOM.
Avance rápido hasta hoy, Chrome lo está enviando, WebKit lo está enviando y Firefox lo ha enviado. Vótalo en Edge aquí.
¿Quieres entenderlo mejor? Rachel Andrew escribió “Cajas que desaparecen con contenido de visualización” y aclara cómo funciona todo:
Este valor se vuelve útil si desea agregar algún elemento porque tiene sentido en términos de semántica del documento, pero no en términos de visualización. Quizás tenga algún contenido que tenga sentido marcado como un artículo, ese artículo es entonces un elemento flexible en su diseño, PERO los elementos que realmente le gustaría que fueran elementos flexibles están anidados dentro de ese artículo. En lugar de aplanar su marcado y eliminar el elemento del artículo para permitir que estos elementos internos formen parte del diseño flexible, puede eliminar los cuadros generados por el artículo usando display: contents. A continuación, obtiene lo mejor de ambos mundos, el marcado semántico más la visualización visual que requiere su diseño. Suena bien para mi.
Manuel Rego intenta explicarlo también:
display: contents hace que el div no genere ningún cuadro, por lo que su fondo, borde y relleno no se renderizan. Sin embargo, las propiedades heredadas como el color y la fuente tienen un efecto en el elemento secundario (elemento span) como se esperaba.
También hay un tema muy relacionado con todo esto: las subcuadrículas. Probablemente literalmente display: subgrid;. Probablemente sea menos importante en términos de mantenimiento de la semántica que display: contents; pero también diferente.
Eric Meyer llamó a las subcuadrículas esenciales:
El diseño de cuadrícula es el primer candidato serio para llenar ese vacío en las últimas dos décadas, y no quiero verlos paralizados desde el principio. Las subcuadrículas son esenciales para la adopción de cuadrículas. Espero que se implementen lo antes posible.
Y para comprender la diferencia, Rachel Andrew también escribió “Por qué mostrar: el contenido no es una subcuadrícula de diseño de cuadrícula CSS”:
No llegará muy lejos a través de una conversación sobre subcuadrícula en CSS Grid Layout sin que alguien sugiera que display: contents resuelve la mayoría de los problemas de todos modos, entonces, ¿realmente necesitamos subcuadrícula? Este no es realmente el caso display: contents de hecho, resuelve una clase de problemas, pero estos son problemas diferentes a los que nos ayudaría subgrid.