🪄 Как убрать лишний div, не трогая HTML

В CSS сетка или флексбокс действуют только на прямых детей контейнера. Если между ними затесалась обёртка, её содержимое живёт в своём мирке и в общую раскладку не попадает.

Свойство display: contents решает это так: сам элемент как коробка исчезает (фон, рамка, отступы пропадают), а его дети становятся детьми родителя. Похоже на «разгруппировать» в графическом редакторе.

Пример из статьи. В лежит div с тремя картинками и рядом . Подпись никак не встроить в сетку фотографий, потому что она снаружи div. Пишем

.photo-group {
display: contents;
}

и теперь браузер видит три картинки и подпись как четырёх равноправных детей , а сетку задаём прямо на нём.

Важная оговорка: с таблицами, заголовками, кнопками и списками это ломает доступность, автор советует там не применять и проверять результат.

В статье ещё семь живых раскладок, где приём спасает.