В CSS сетка или флексбокс действуют только на прямых детей контейнера. Если между ними затесалась обёртка, её содержимое живёт в своём мирке и в общую раскладку не попадает.
Свойство
display: contents решает это так: сам элемент как коробка исчезает (фон, рамка, отступы пропадают), а его дети становятся детьми родителя. Похоже на «разгруппировать» в графическом редакторе.Пример из статьи. В
<figure> лежит div с тремя картинками и рядом <figcaption>. Подпись никак не встроить в сетку фотографий, потому что она снаружи div. Пишем.photo-group {
display: contents;
}и теперь браузер видит три картинки и подпись как четырёх равноправных детей
<figure>, а сетку задаём прямо на нём.Важная оговорка: с таблицами, заголовками, кнопками и списками это ломает доступность, автор советует там не применять и проверять результат.
В статье ещё семь живых раскладок, где приём спасает.