Проблема неравномерных карточек решается через CSS Grid с использованием свойства subgrid. Метод позволяет дочерним элементам наследовать структуру родительской сетки, автоматически выравнивая содержимое по вертикали и горизонтали без необходимости вручную задавать высоту строк или использовать flexbox. Это обеспечивает единый ритм верстки при разном объеме контента в ячейках.
Как выровнять содержимое карточек разной высоты с помощью subgrid: прямой ответ и суть метода
Проблема неравных высот карточек в CSS Grid возникает, когда элементы внутри ячеек (например, текст или изображения) имеют разную высоту. По умолчанию браузер выравнивает содержимое по верхнему краю, из-за чего нижние ячейки выглядят пустыми. Метод subgrid решает эту задачу автоматически: он позволяет дочерним элементам унаследовать свойства родительской сетки, включая определение высоты строк. Это устраняет необходимость вручную задавать высоту для каждой ячейки или использовать фиксированные размеры.
Суть метода заключается в том, что родительский контейнер создает единую сетку с определенным количеством строк. Когда вы применяете свойство subgrid к дочернему элементу (например, карточке), он наследует не только структуру колонок, но и высоту строк родителя. В результате содержимое внутри карточки автоматически растягивается или сжимается так, чтобы заполнить всю высоту родительской ячейки, выравниваясь по нижнему краю без лишних отступов.
Этот подход особенно эффективен при создании сеток из карточек товаров, новостей или портфолио. Он упрощает код, убирая лишние свойства типа grid-template-rows в дочерних элементах и предотвращает появление «пустых» пространств. Однако важно помнить, что subgrid работает только внутри контекста Grid-контейнера: если родитель не является сеткой, или если свойства строк не определены явно, метод может не сработать как ожидается.
Для корректной работы необходимо, чтобы родительский контейнер имел свойство grid-template-rows с конкретными значениями (например, auto, minmax() или фиксированные пиксели). Если строки родителя имеют высоту auto, subgrid передаст это значение дочерним элементам, и они будут занимать ровно столько места, сколько нужно их содержимому. Это обеспечивает визуальное выравнивание по вертикали без потери гибкости дизайна.
В отличие от старых методов с использованием grid-row: span или явного указания высоты, subgrid сохраняет семантику структуры. Он не требует дублирования кода для каждой карточки и позволяет легко адаптировать сетку под изменение контента. При этом производительность не страдает, так как браузер оптимизирует рендеринг наследуемых свойств сетки.
Шаг 1. Подготовка структуры контейнера и определение зоны выравнивания
Перед применением subgrid необходимо создать родительский контейнер, который будет выступать единой сеткой для всех карточек. Этот контейнер должен иметь свойство display: grid с заданным количеством колонок (например, grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))). Важно не задавать фиксированную высоту строкам в этом родителе, так как subgrid наследует их размеры от дочерних элементов.
Зона выравнивания определяется границами родительского контейнера. Все карточки-дочери должны быть прямыми детьми этого контейнера или находиться внутри него без промежуточных grid-контейнеров, которые могли бы нарушить передачу свойств. Если между контейнером и карточкой есть блок с отступом (margin) или padding, это не влияет на сетку, но важно следить за тем, чтобы контент внутри карточки не вылезал за пределы её границ.
Проверьте, что у родительского контейнера нет явного свойства grid-template-rows. Если оно задано, subgrid не сможет автоматически рассчитать высоту строк на основе самого высокого контента в колонке. Браузер должен иметь возможность определить максимальную высоту строки динамически. Это достигается за счет того, что карточки сами растягиваются до высоты своего содержимого.
Убедитесь, что у дочерних элементов (карточек) заданы свойства grid-column и grid-row, если они должны занимать несколько ячеек или строиться в определенном порядке. Для базового выравнивания по высоте достаточно оставить их как прямые дети с дефолтными значениями. Если карточки имеют разную внутреннюю структуру (например, одна содержит только текст, другая — текст и изображение), subgrid корректно обработает это, растянув строку до высоты самой высокой карточки в данной колонке.
Ограничение метода заключается в том, что subgrid работает только внутри контекста grid. Если вы попытаетесь использовать его на элементе с display: flex или block, свойства не применятся. Также браузеры могут по-разному интерпретировать наследование строк в зависимости от версии движка (WebKit, Gecko, Blink), поэтому тестирование на целевых устройствах обязательно.
Практический пример: создайте контейнер .cards-grid с 3 колонками. Внутри разместите три карточки разной высоты. Первая содержит заголовок и параграф текста, вторая — заголовок, изображение и подпись, третья — только список. После применения subgrid на родителе все три карточки выровняются по верху и низу в пределах одной строки сетки, образуя единый блок.
Шаг 2. Настройка свойств grid-template-rows для создания единой сетки
Свойство grid-template-rows определяет высоту строк в родительском контейнере. В контексте выравнивания карточек разной высоты задача состоит не в том, чтобы задать фиксированную высоту каждой строке, а в том, чтобы позволить сетке автоматически вычислять её размер на основе самого высокого элемента внутри ячейки.
Для реализации этого используется ключевое слово repeat с параметром minmax. Синтаксис выглядит следующим образом: grid-template-rows: repeat(число_строк, minmax(авто, 1fr));. Параметр авто означает, что высота строки будет определяться содержимым ячейки (карточкой). Значение 1fr (fraction) указывает браузеру распределить оставшееся свободное пространство между строками поровну.
Если в контейнере три карточки, выражение принимает вид: grid-template-rows: repeat(3, minmax(auto, 1fr));. Это создает три строки. Высота первой и второй строк будет равна высоте их содержимого (текста или картинки). Третья строка также примет высоту своего контента. Если бы одна карточка была очень высокой, она растянула бы соответствующую строку, а остальные остались бы компактными, но при этом все элементы внутри одной строки сетки выровнялись бы по вертикали.
Важно понимать разницу между minmax(auto, 1fr) и minmax(0, 1fr). Использование auto гарантирует, что строка не будет сжиматься до нуля, если в ней есть контент. Это предотвращает появление пустых строк над или под карточками, которые браузер мог бы создать при попытке распределить пространство между нулевыми высотами.
После настройки свойств grid-template-rows родительский контейнер готов принимать элементы. Сетка теперь имеет четкую структуру: каждая строка занимает ровно столько места, сколько нужно для самого высокого элемента в ней, а все дочерние элементы внутри этой строки выровнены по вертикали относительно друг друга.
Шаг 3. Использование span для распределения элементов по колонкам
Свойство grid-template-rows создало единую сетку, но не определило, как элементы будут занимать пространство внутри неё. Для этого используется свойство grid-column: span N. Оно указывает браузеру, что элемент должен занять N колонок подряд. Это позволяет создавать сложные макеты, где одна карточка занимает всю ширину ряда, а другие — только часть.
Если вы хотите, чтобы карточка с изображением занимала две колонки, а текст оставался в одной, задайте span: 2 для первого элемента и span: 1 для второго. Браузер автоматически рассчитает отступы между ними, если они заданы через gap. Важно помнить, что сумма ширины всех элементов в строке не должна превышать ширину контейнера, иначе произойдёт переполнение.
В случае с карточками разной высоты span работает как механизм выравнивания по горизонтали. Элементы, занимающие меньше колонок, будут смещены влево или вправо в зависимости от порядка их следования в HTML. Если нужно центрировать элементы, используйте margin-left и margin-right для компенсации свободного пространства внутри строки.
Пример кода показывает, как задать span для разных элементов в одной строке. Первый элемент занимает две колонки, второй — одну. Свойство grid-column-start можно использовать для смещения элемента не от начала сетки, а от конкретной колонки. Это полезно, если вы хотите создать асимметричный макет, где элементы начинаются с разных позиций.
При работе с subgrid важно учитывать, что span влияет только на текущую строку родительской сетки. Если вы используете вложенные гриды, свойства span наследуются или переопределяются в зависимости от контекста. В простых макетах достаточно задать span напрямую в селекторе элемента.
Ошибки при использовании span часто связаны с неправильным подсчётом количества колонок. Если контейнер имеет 12 колонок, а вы задали span: 5 для одного элемента и span: 4 для другого, останется одна колонка свободного пространства. Её можно использовать для отступа или заполнить дополнительным элементом.
Для адаптивных макетов span может меняться в зависимости от медиа-запросов. На мобильных устройствах часто используют одну колонку, поэтому span всегда равен 1. На десктопах можно увеличивать количество колонок и менять значения span для создания более сложных композиций.
Шаг 4. Обработка контента внутри карточек (текст, изображения) для сохранения пропорций
Самая частая ошибка при использовании subgrid заключается в том, что разработчики выравнивают сетку контейнера, но забывают о содержимом ячеек. Если текст или изображение внутри карточки не занимают всю высоту строки, браузер автоматически добавляет пустое пространство (shrink-to-fit), и визуальное выравнивание нарушается. Чтобы карточки выглядели одинаково высокими, контент должен занимать 100% доступной высоты ячейки.
Для текста это решается свойством height: 100% у блока-обертки или у самого текстового элемента, если он не имеет фиксированной высоты. Изображения требуют отдельного внимания. Если картинка должна растягиваться на всю высоту строки сетки, используйте object-fit: cover с контейнером, имеющим height: 100%. Это обрезает лишние части изображения по краям, сохраняя пропорции самого фото, но заполняя пространство ячейки полностью.
Важно различать два подхода к работе с медиа внутри subgrid. Первый — когда изображение является фоном или ключевым элементом дизайна и должно заполнить ячейку. Второй — когда контент должен быть читаемым независимо от высоты строки. Во втором случае лучше использовать flexbox или grid внутри самой карточки, где текст занимает 100% высоты, а изображения адаптируются под него. Это предотвращает появление «плавающих» элементов, которые не прижаты к низу ячейки.
Практический пример: предположим, у вас есть карточка с заголовком и текстом. Если высота строки сетки 200px, а текст занимает только 150px, без height: 100% останется 50px пустоты. В subgrid это пространство не исчезает само по себе. Решение — задать высоту контейнеру контента в 100% и убедиться, что шрифты и отступы (padding/margin) учитываются при расчете общей высоты строки.
Изображения часто становятся причиной проблем с производительностью и визуальным балансом. Если вы используете object-fit: cover, убедитесь, что исходное изображение имеет адекватные пропорции. Иначе обрезка будет слишком агрессивной, и композиция потеряет смысл. Альтернатива — использовать aspect-ratio для контейнера изображения и scale-down, если нужно сохранить все содержимое без обрезки, но тогда высота строки сетки должна быть рассчитана с запасом под самое высокое изображение в группе.
Проверка результата происходит визуально: все карточки в ряду должны иметь одинаковую нижнюю границу. Если одна карточка «выглядит ниже» остальных, значит, внутри неё есть элемент меньшей высоты или отступы не учтены. Используйте инспектор кода для проверки реальных значений height у элементов-обертков контента. Они должны совпадать с высотой строки родительского grid.
Ограничение метода: subgrid не меняет поведение контента, если он имеет фиксированную высоту (например, через min-height или конкретные пиксели). В таких случаях выравнивание невозможно без изменения CSS свойств самого контента. Поэтому перед применением subgrid необходимо привести все элементы внутри карточек к использованию относительных единиц измерения высоты (percent) или flex-распределению.
Шаг 5. Адаптация под мобильные устройства и изменение количества колонок
Адаптация сетки subgrid для мобильных устройств требует переопределения свойств контейнера через медиа-запросы. На десктопе часто используется одна или две колонки, тогда как на экранах смартфонов целесообразно перейти к одной колонке, чтобы обеспечить удобство чтения и взаимодействия пальцем. Изменение количества колонок не меняет логику выравнивания по вертикали: если родительский контейнер использует subgrid, дочерние элементы автоматически наследуют новую структуру сетки при изменении ширины.
Для реализации адаптации в CSS применяется свойство grid-template-columns внутри @media query. Пример настройки для экрана менее 768 пикселей:
@media (max-width: 768px) {
.cards-container {
grid-template-columns: 1fr;
grid-auto-rows: auto; /* Возврат к автоматическому расчету высоты */
}
}
При этом свойство grid-auto-rows должно оставаться в значении auto или minmax(auto, …), чтобы высота карточек определялась контентом, а не фиксированными значениями. Это гарантирует, что на мобильных устройствах карточки будут занимать всю доступную высоту экрана, если это необходимо для визуального восприятия.
Важно учитывать поведение свойства grid-template-areas при смене количества колонок. Если на десктопе используются named areas (например, layout: 'header header body body'), то на мобильной версии эти области должны трансформироваться в вертикальную последовательность. Это достигается либо через медиа-запросы с изменением значений grid-template-areas, либо через использование grid-auto-flow: dense в сочетании с правильным порядком элементов. Однако subgrid упрощает этот процесс: если родительский контейнер уже настроен как subgrid на десктопе, то при переключении на мобильную версию достаточно изменить только количество колонок, а строки автоматически перестроятся под новый контекст.
Ограничение метода сохраняется и в адаптивной верстке: subgrid не меняет поведение контента, если он имеет фиксированную высоту (например, через min-height или конкретные пиксели). В таких случаях выравнивание невозможно без изменения CSS свойств самого контента. Поэтому перед применением subgrid необходимо привести все элементы внутри карточек к использованию относительных единиц измерения высоты (percent) или flex-распределению.
Практический пример: если в карточке используется изображение с отношением сторон 16:9, а текст занимает переменную высоту, то на мобильном устройстве subgrid корректно распределит пространство. Если же в карточке задан min-height: 200px, то на узком экране это может создать излишние отступы или «пустоты». Решение — заменить фиксированные высоты на flex-grow или percent, чтобы контент заполнял доступное пространство равномерно.
Проверка результата осуществляется через инспектор кода в браузере: при изменении ширины окна должно происходить плавное переключение между режимами сетки без скачков верстки. Если карточки «прыгают» или меняют порядок элементов, значит, используются жесткие ограничения высоты или width, которые блокируют работу subgrid. Устранение таких ограничений позволяет сохранить целостность визуального ряда на всех типах устройств.
Шаг 6. Проверка производительности и влияние на рендеринг страницы
Использование CSS Grid с подсетями (subgrid) меняет логику отрисовки страницы, что напрямую влияет на скорость загрузки и плавность работы интерфейса. Главная особенность subgrid заключается в том, что браузер должен вычислить размеры родительского контейнера, прежде чем распределить пространство между дочерними элементами. Это требует дополнительных вычислительных ресурсов по сравнению с традиционными методами верстки, где размеры задаются явно.
При рендеринге страницы браузер проходит несколько этапов: анализ DOM-дерева, расчет стилей и отрисовку пикселей. Сложные вложенные сетки увеличивают время расчета стилей (layout), так как браузеру приходится учитывать зависимости между родительскими и дочерними ячейками. Если внутри карточек используется много контента или тяжелых изображений, нагрузка на процессор возрастает. Однако современные движки браузера эффективно справляются с такими задачами, если структура кода логична и не содержит избыточных вложенностей.
Важно учитывать, что subgrid работает только в современных браузерах (Chrome 120+, Firefox 123+, Safari 17+). Если пользователь заходит на сайт со старым браузером или отключил экспериментальные функции, стили могут игнорироваться. В этом случае карточки будут отображаться по умолчанию без выравнивания, что может привести к визуальным артефактам. Для обеспечения совместимости необходимо использовать фоллбэк-стили (например, через @supports), которые задают альтернативную верстку для старых движков.
Производительность также зависит от количества колонок и строк в сетке. Чем больше элементов нужно распределить с помощью span, тем сложнее вычисления. В крупных интернет-магазинах или новостных порталах, где на одной странице может быть сотни карточек, чрезмерное использование subgrid может замедлить прокрутку. В таких случаях рекомендуется разбивать контент на несколько контейнеров или использовать упрощенные сетки для менее важных блоков.
Для оценки влияния на производительность можно использовать инструменты разработчика в браузере (Performance tab). Запустите запись сессии при открытии страницы и изменении размера окна. Если график CPU показывает постоянную нагрузку во время скролла, значит, браузер тратит ресурсы на перерасчет сетки. Обычно это происходит из-за рефлоу (reflow) — процесса пересчета геометрии элементов. Избегайте частых изменений ширины контейнеров в JavaScript, так как это провоцирует повторные вычисления стилей.
Оптимизация изображений внутри карточек критична для общей скорости работы. Даже если сетка настроена идеально, тяжелые картинки будут тормозить загрузку и рендеринг. Используйте форматы WebP или AVIF, сжимайте изображения без потери качества и применяйте lazy loading для элементов ниже первого экрана. Это снижает объем данных, которые браузер должен обработать сразу при открытии страницы.
Если сайт содержит динамически генерируемый контент (например, через JavaScript), убедитесь, что сетка создается после загрузки DOM-дерева. Инициализация Grid-сетки в момент рендеринга может вызвать микрофризы. Лучше использовать CSS-классы и применять стили через атрибуты data-* или классы utility, чтобы минимизировать работу скриптов. Также стоит избегать inline-стилей с вычислениями subgrid внутри JavaScript.
В заключение: subgrid — мощный инструмент для создания адаптивных макетов, но он требует внимания к производительности. Тестируйте сайт на разных устройствах и браузерах, следите за нагрузкой на CPU и память. Если возникают проблемы со скоростью, упростите структуру сетки или используйте более простые методы выравнивания для второстепенных блоков.
Частые ошибки при внедрении subgrid и способы их устранения
Ошибка заключается в попытке использовать subgrid на элементах, которые не являются прямыми детьми контейнера с grid-template-rows: subgrid. Свойство работает только тогда, когда родительский элемент явно определяет высоту строк через свойство grid-template-rows или использует auto для автоматического расчета. Если родитель имеет фиксированную высоту (например, 100px) и внутри него находятся карточки с разным количеством строк, браузер не сможет корректно выровнять их содержимое, так как у него нет информации о реальной высоте строк сетки.
Вторая распространенная проблема — игнорирование необходимости задать высоту для родительского контейнера. Если родительский элемент имеет высоту auto, а внутри него находятся карточки с subgrid, выравнивание может работать некорректно, если сами карточки не имеют явного определения высоты строк или если их содержимое не растягивает сетку до нужного размера. В таких случаях браузер пытается определить высоту по контенту, но это может привести к тому, что строки внутри карточек будут иметь разную высоту, и выравнивание нарушится.
Третья ошибка — использование subgrid в элементах, которые не являются частью одной сетки. Например, если вы пытаетесь применить subgrid к нескольким независимым контейнерам, каждый из которых имеет свою собственную сетку, это не сработает. Subgrid требует, чтобы все элементы были частью единой иерархии сетки, где родительский элемент определяет структуру строк для всех дочерних элементов.
Четвертая ошибка — отсутствие явного определения количества строк в родительском контейнере. Если вы не указываете grid-template-rows: subgrid или не используете auto для расчета высоты, браузер не сможет корректно выровнять содержимое карточек. В таких случаях рекомендуется явно указать количество строк или использовать auto для автоматического расчета высоты.
Пятая ошибка — использование subgrid в элементах, которые не являются прямыми детьми контейнера с grid-template-rows: subgrid. Например, если вы пытаетесь применить subgrid к нескольким независимым контейнерам, каждый из которых имеет свою собственную сетку, это не сработает. Subgrid требует, чтобы все элементы были частью единой иерархии сетки, где родительский элемент определяет структуру строк для всех дочерних элементов.
Шестая ошибка — игнорирование необходимости задать высоту для родительского контейнера. Если родительский элемент имеет высоту auto, а внутри него находятся карточки с subgrid, выравнивание может работать некорректно, если сами карточки не имеют явного определения высоты строк или если их содержимое не растягивает сетку до нужного размера. В таких случаях браузер пытается определить высоту по контенту, но это может привести к тому, что строки внутри карточек будут иметь разную высоту, и выравнивание нарушится.
Седьмая ошибка — использование subgrid в элементах, которые не являются частью одной сетки. Например, если вы пытаетесь применить subgrid к нескольким независимым контейнерам, каждый из которых имеет свою собственную сетку, это не сработает. Subgrid требует, чтобы все элементы были частью единой иерархии сетки, где родительский элемент определяет структуру строк для всех дочерних элементов.
Восьмая ошибка — отсутствие явного определения количества строк в родительском контейнере. Если вы не указываете grid-template-rows: subgrid или не используете auto для расчета высоты, браузер не сможет корректно выровнять содержимое карточек. В таких случаях рекомендуется явно указать количество строк или использовать auto для автоматического расчета высоты.
Шаг 8. Пример кода для реализации выравнивания карточек в реальном проекте
Для практической реализации выравнивания содержимого карточек разной высоты используется связка родительского контейнера с свойством `grid-template-rows: subgrid` и дочерних элементов, использующих `span`. Этот подход позволяет передать структуру строк от родителя к детям, сохраняя вертикальное выравнивание без жесткого задания фиксированных высот.
Ниже приведен пример HTML и CSS кода. Он демонстрирует создание сетки из трех колонок, где каждая колонка содержит карточки с разным количеством текста и изображений. Родительский контейнер определяет высоту строк автоматически, а дочерние элементы наследуют эту структуру.
В коде используется класс `.card-grid` для родительского блока и `.card` для элементов внутри него. Свойство `grid-template-rows: subgrid` в родителе гарантирует, что строки будут иметь одинаковую высоту во всех колонках. Класс `.card` получает свойство `span`, которое указывает на количество строк, занимаемых элементом.
Важно отметить, что для корректной работы `subgrid` необходимо явно задать структуру строк в родителе или использовать `auto`. Если родитель имеет фиксированную высоту без указания количества строк, выравнивание не сработает. Также следует убедиться, что контент внутри карточек (текст, изображения) не вылезает за пределы сетки, так как это может нарушить расчет высоты строк.
Пример кода можно адаптировать под любой проект, меняя количество колонок и строк в зависимости от сложности макета. Для мобильных устройств рекомендуется переопределять сетку на одну колонку, сохраняя логику `subgrid` для вертикального выравнивания элементов внутри этой единственной колонки.
Вопросы и ответы
Работает ли subgrid во всех современных браузерах?
Свойство subgrid поддерживается в последних версиях Chrome, Edge, Safari и Firefox. В старых браузерах или на устройствах с устаревшими движками рендеринга оно может не работать, поэтому для таких случаев рекомендуется использовать фоллбэк-стили или медиа-запросы.
Можно ли использовать subgrid внутри flexbox?
Нет, subgrid работает исключительно в контексте CSS Grid. Попытка применить его к элементу с display: flex приведёт к игнорированию свойства или ошибке в зависимости от браузера.
Что делать, если нужно выровнять карточки по низу?
Для выравнивания содержимого по низу используйте свойство align-items: end на родительском контейнере. Свойство subgrid само по себе не меняет направление выравнивания по вертикали внутри ячеек.
По теме
.cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, minmax(auto, 1fr));
}
.card-item {
/* Высота карточки теперь определяется контентом */
height: auto;
}.card-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.card-wide {
grid-column: span 8;
}
.card-narrow {
grid-column: span 4;
}
/* Альтернативный вариант с явным указанием колонок */
.card-custom {
grid-column-start: 2;
grid-column-end: span 6;
}@media (max-width: 768px) {
.cards-container {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
.card-content {
min-height: auto;
height: auto;
}
}.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.card {
display: grid;
grid-template-rows: subgrid;
gap: 1rem;
}
.card > * {
grid-column: 1 / -1;
}<style>
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 1rem;
padding: 1rem;
background: #f5f5f5;
}
.card {
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
/* Наследование структуры строк от родителя */
grid-row: span 1;
}
.card.large {
/* Занимает две строки */
grid-row: span 2;
}
.card.tall {
/* Занимает три строки */
grid-row: span 3;
}
</style>
<div class="card-grid">
<div class="card">Карточка 1 (стандарт)</div>
<div class="card large">Карточка 2 (высокая, 2 строки)</div>
<div class="card">Карточка 3 (стандарт)</div>
<div class="card tall">Карточка 4 (очень высокая, 3 строки)</div>
<div class="card">Карточка 5 (стандарт)</div>
<div class="card">Карточка 6 (стандарт)</div>
</div>/* Ключевое свойство для выравнивания */
.card-grid {
display: grid;
/* Определяем количество колонок и минимальную высоту строк */
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
/* Включаем наследование структуры строк */
grid-template-rows: subgrid;
}
/* Дочерние элементы автоматически наследуют строки родителя */
.card {
/* Явное указание количества строк не обязательно, если используется span */
grid-row: auto;
}
