Настройте grid-раскладку и скопируйте CSS.
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px;
Grid — это двумерная система раскладки: вы задаёте колонки и строки, а элементы размещаются в ячейках. Это идеальный инструмент для галерей, карточек, дашбордов и сложных макетов, где Flexbox недостаточно. Инструмент собирает grid-template и показывает результат.
Количество и размеры колонок задаются через grid-template-columns (часто в долях fr), зазоры — через gap. Единица fr делит свободное место поровну, а функция repeat() сокращает запись одинаковых колонок. Готовый CSS копируется в проект.
fr — это доля свободного пространства. «1fr 1fr» делит ширину поровну на две колонки, «2fr 1fr» — в соотношении 2 к 1.
Используйте repeat(auto-fit, minmax(200px, 1fr)) — колонки сами переносятся в зависимости от ширины контейнера.
Нет, они дополняют друг друга. Grid — для двумерных макетов, Flexbox — для выравнивания в одном направлении.
Линейные градиенты с предпросмотром.
CSS-тени с живым предпросмотром.
Скругление углов с предпросмотром.
Контраст цветов по стандарту WCAG.
Оттенки и тона из базового цвета.
Иконки сайта всех размеров из картинки.