Сегодня разберём CSS-свойство — display: contents. Оно редко встречается, но может сильно упростить вёрстку в некоторых кейсах. Что такое display: contents? Это свойство заставляет элемент "исчезнуть" из рендера, но его дочерние элементы остаются и ведут себя так, будто родителя нет. Пример У нас есть сетка, но лишняя обёртка ломает структуру: <style> .wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .inner { display: contents; } p { background: lightblue; padding: 10px; } </style> <div class="wrapper"> <div class="inner"> <p>Привет</p> <p>Мир</p> </div> </div> Без display: contents блок .inner создаёт лишний уровень в сетке, и не попадают в ячейки .wrapper. С display: contents элемент .inner исчезает из рендера, и <p/> становятся прямыми детьми .wrapper для сетки, занимая ячейки. Когда полезно? - Убираем лишние обёртки, не ломая семантику HTML. - Упрощаем работу с Grid и Flexbox, чтобы дети родителя участвовали в сетке напрямую. - Используем для улучшения доступности. Поддержка браузерами: Can I Use #CSS #HTML