CSS Subgrid Долгое время у Grid Layout была одна проблема: дочерние элементы (внуки основного контейнера) не могли участвовать в сетке родителя. CSS Subgrid это исправил. В чем была проблема? Представьте карточки товаров. Внутри каждой есть заголовок, описание и кнопка. Если в одной карточке описание длиннее, оно растягивает карточку, но заголовки и кнопки в соседних карточках перестают идти «в одну линию». Как работает Subgrid? Теперь мы можем сказать дочернему элементу: «Используй сетку своего родителя». .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { display: grid; grid-template-rows: subgrid; / Магия здесь! / grid-row: span 3; / Карточка занимает 3 строки родительской сетки / } Почему это круто? Идеальное выравнивание: Все заголовки, тексты и футеры во всех карточках всегда будут на одном уровне. Меньше кода: Вам не нужно подбирать фиксированную высоту или использовать сложные хаки. Гибкость: Сетка становится по-настоящему целостной. Поддержка: На сегодняшний день Subgrid поддерживается всеми современными браузерами (Chrome 117+, Firefox, Safari). #css