display: contents
display: contents hace que un elemento no genere caja: desaparece del layout y sus hijos pasan a comportarse como hijos directos de su padre.
- Es útil cuando un envoltorio del HTML impide que sus hijos participen en el flex o grid del contenedor.
- El elemento pierde su fondo, borde, padding y tamaño, porque ya no tiene caja propia.
- Úsalo con cuidado en botones, enlaces o listas: algunos navegadores han llegado a perder su significado para los lectores de pantalla.
Ejemplo
El contenedor es un grid de 3 columnas y los hijos 2 y 3 están dentro de un envoltorio con la clase content. Con block el envoltorio ocupa una sola celda; con contents desaparece y sus hijos ocupan sus propias celdas.
ResultadoEn vivo
html
css