Генератор CSS Grid
Выберите столбцы, строки и расстояние между ними или используйте адаптивный режим, чтобы карточки сами перестраивались под экран. Предпросмотр сразу показывает результат.
Как пользоватьсяМакет на CSS Grid
Потяните угол предпросмотра, чтобы проверить разную ширину. Нажмите на элемент, чтобы он занял 2 столбца.
Доступно на: 
Генератор CSS Grid: для чего нужен
Выберите фиксированные столбцы (с быстрыми вариантами на 2, 3 и 4 столбца, контент с боковой панелью и меню с контентом) или адаптивный режим, в котором столбцы подстраиваются под ширину с repeat(auto-fit, minmax()). Задайте число элементов и расстояние между ними.
Нажмите на элемент в предпросмотре, чтобы он занял два столбца, и потяните угол предпросмотра, чтобы проверить разную ширину. CSS и HTML готовы к копированию.
Как пользоваться
- Выберите режим и столбцы.
- Задайте элементы и отступ; нажмите на элементы, чтобы занять 2 столбца.
- Скопируйте CSS и HTML.
Когда использовать
- Сетки карточек, товаров и фото.
- Макеты с боковой панелью.
- Изучение CSS Grid на наглядном результате.
Частые вопросы
Что значит 1fr?
Одна доля оставшегося места. Три столбца 1fr 1fr 1fr делят ширину на равные части; 2fr 1fr делает первый столбец вдвое шире второго.
Что делает repeat(auto-fit, minmax(220px, 1fr))?
Создаёт столько столбцов, сколько поместится, каждый не уже 220px, и растягивает столбцы, чтобы занять всю строку. Это самый простой способ сделать адаптивную сетку карточек без media query.
Как сделать так, чтобы элемент занимал два столбца?
Используйте grid-column: span 2 у элемента. В предпросмотре нажмите на элемент, чтобы переключить между 1 и 2 столбцами, и CSS обновится.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.