Создание чистых, хорошо выровненных карточек — распространенная задача в веб-разработке. В этом руководстве я покажу вам, как создать сетку из четырех карточек в строке. Каждая карточка содержит несколько блоков контента — заголовок, изображение, цену, маркированный список и кнопку призыва к действию (CTA) — выровненных горизонтально внутри карточки с помощью CSS Grid и мощной функции CSS Subgrid. Что вы создадите - Сетку карточек (максимум 4 карточки в строке). - Каждая карточка содержит несколько блоков контента, выровненных горизонтально. - Использование CSS Grid для общей компоновки. - Использование CSS Subgrid для внутреннего выравнивания контента внутри каждой карточки. Зачем использовать CSS Subgrid? CSS Subgrid — относительно новая функция, которая позволяет вложенной сетке наследовать размеры дорожек родительской сетки. Это означает, что вы можете идеально выровнять внутренний контент с внешней сеткой без ручного расчета или дублирования размеров дорожек.