🔲

CSS Grid калькулятор

Визуальный генератор CSS Grid сеток с live-превью и готовым кодом

Быстрые шаблоны

Колонки (3)

Строки (2)

Отступы (gap)Одинаковые

16px

Выравнивание

justify-items

align-items

justify-content

align-content

Дополнительно

Элементов6

Мин. высота300px

Использовать repeat() в CSS (если возможно)Показывать номера элементов

3 кол. × 2 стр.gap: 16px6 элем.

CSS Grid калькулятор

Калькулятор помогает быстро создать CSS Grid-раскладку: задать количество колонок и строк, настроить размеры, отступы (gap) и получить готовый код.

CSS Grid — самый мощный инструмент для двумерных раскладок в CSS. В отличие от Flexbox, Grid работает одновременно по горизонтали и вертикали.

🖼️

Создание галереи для портфолио

Дизайнер Мария верстала галерею работ с карточками разного размера — некоторые должны занимать 2 колонки, другие — 2 строки.

Задала 4 колонки с auto-fill и minmax(250px, 1fr) для адаптивности

Настроила gap: 16px для равномерных отступов

Указала span для крупных карточек: grid-column: span 2

Скопировала готовый CSS и HTML-структуру

✅

Адаптивная галерея с масонри-подобным эффектом была готова за 5 минут — без JavaScript и дополнительных библиотек

🧠

Факты о CSS Grid

💎

CSS Grid поддерживается 97% браузеров — можно использовать без фоллбэков в большинстве проектов.

🔍

Функция repeat(auto-fill, minmax(250px, 1fr)) создаёт адаптивную сетку без единого media-query.

📊

Единица fr (fraction) — уникальная для Grid: она распределяет оставшееся пространство пропорционально.

🌟

Grid-разметку можно задавать через ASCII-art: grid-template-areas позволяет «рисовать» раскладку в коде.

⚡

Subgrid (вложенный Grid, наследующий сетку родителя) поддерживается во всех современных браузерах с 2023 года.

🧠

Рейчел Эндрю — главный евангелист CSS Grid — написала более 100 статей и создала gridbyexample.com для обучения.

Единицы измерения CSS Grid — сравнительная таблица

Единица	Описание	Когда использовать
fr	Дробная единица (fraction) — пропорциональное распределение свободного пространства	Адаптивные колонки, равномерное разделение, гибкие пропорции (1fr 2fr)
px	Пиксели — фиксированный размер	Сайдбары, хедеры и футеры с точными размерами
%	Процент от ширины контейнера	Макеты, привязанные к ширине родительского элемента
rem / em	Относительные единицы на основе размера шрифта	Масштабируемые интерфейсы, зависящие от типографики
auto	Размер определяется содержимым	Строки с контентом переменной высоты
min-content	Минимальный размер, при котором контент не переполняется	Колонки с короткими метками или иконками
max-content	Размер, необходимый для отображения контента без переноса	Колонки навигации, заголовки, не требующие переноса

💡

Grid vs Flexbox

Grid — для двумерных раскладок (строки + колонки одновременно). Flexbox — для одномерных (строка ИЛИ колонка). Они не конкурируют, а дополняют друг друга: используйте Grid для общей структуры, Flexbox — для выравнивания внутри ячеек.

Как пользоваться генератором CSS Grid — пошаговая инструкция

Выберите шаблон или настройте колонки и строки

Воспользуйтесь одним из готовых пресетов или задайте количество колонок и строк вручную. Для каждого трека выберите единицу измерения: fr для пропорционального распределения, px для фиксированной ширины, % для процентного, auto для автоматического размера.

Настройте отступы и выравнивание

Используйте ползунок gap для задания расстояния между ячейками сетки. При необходимости разделите горизонтальный (column-gap) и вертикальный (row-gap) отступы. Настройте свойства justify-items, align-items, justify-content и align-content для управления позиционированием элементов внутри grid-контейнера.

Скопируйте готовый CSS и HTML код

Переключитесь на вкладку «Код», чтобы увидеть сгенерированный CSS и HTML. Скопируйте нужный фрагмент кнопкой «Копировать» или заберите весь код целиком. Вставьте его в свой проект — сетка готова к использованию.

Примеры использования калькулятора CSS Grid

🏗️ Создание адаптивной раскладки лендинга

Верстальщик получил макет лендинга с шапкой на всю ширину, основным контентом с сайдбаром и подвалом. С помощью генератора он задает 3 колонки (200px + 1fr + 200px) и 3 строки (60px + 1fr + 50px), применяет пресет «Holy Grail», копирует CSS и переходит к наполнению контентом. Время на создание grid-разметки — менее минуты.

📱 Прототипирование мобильной версии

Фронтенд-разработчик тестирует разные конфигурации grid для мобильного представления каталога товаров. Он переключается между 2 и 3 колонками в единицах fr, подбирает оптимальный gap для сенсорного интерфейса и сравнивает результат в превью. Вместо правки кода и перезагрузки страницы — моментальная визуальная обратная связь.

🎓 Изучение CSS Grid для начинающих

Студент курса по вёрстке разбирается в разнице между justify-items и justify-content. Он переключает значения stretch, center, start, end, space-between и наблюдает за поведением элементов. Калькулятор помогает быстрее освоить модель Grid Layout через визуальные эксперименты, а не заучивание спецификаций.

🖼️ Построение галереи изображений

Дизайнер-верстальщик создает фотогалерею, используя пресет «Галерея» (4 колонки по 1fr, строки по 200px). Он настраивает gap 12px, проверяет внешний вид в превью и копирует готовый grid-код. Далее в HTML подставляет реальные изображения вместо плейсхолдеров. Результат — аккуратная, равномерно распределенная сетка.

⚙️ Быстрый экспорт для React/Vue компонентов

Разработчик React-приложения использует генератор для визуального подбора пропорций dashboard-сетки. Он копирует значения grid-template-columns и gap, вставляет в inline-стили или CSS-модуль компонента. Калькулятор ускоряет итерации дизайна без переключения между файлами проекта.

Часто задаваемые вопросы о CSS Grid калькуляторе

Что такое CSS Grid и чем он отличается от Flexbox?

CSS Grid Layout — это двумерная система раскладки, которая позволяет управлять расположением элементов одновременно по горизонтали (колонки) и вертикали (строки). Flexbox работает в одном направлении — строке или столбце. Grid идеален для построения общей структуры страницы (хедер, контент, сайдбар, футер), а Flexbox — для выравнивания элементов внутри компонентов. На практике их часто комбинируют: Grid для макета страницы, Flexbox для внутренних элементов.

Что значит единица fr в CSS Grid?

fr (fraction) — дробная единица, представляющая долю свободного пространства в grid-контейнере. Например, grid-template-columns: 1fr 2fr создаст две колонки, где вторая вдвое шире первой. Преимущество fr перед процентами в том, что fr автоматически учитывает значение gap: свободное пространство сначала уменьшается на величину отступов, а затем делится по пропорциям.

Какие браузеры поддерживают CSS Grid?

CSS Grid поддерживается всеми современными браузерами: Chrome, Firefox, Safari, Edge, Opera — включая мобильные версии. Глобальная поддержка превышает 97% пользователей. Internet Explorer 11 имел частичную поддержку устаревшей спецификации, но этот браузер больше не поддерживается Microsoft. Для подавляющего большинства проектов CSS Grid можно использовать без ограничений.

Когда использовать repeat() в grid-template-columns?

Функцию repeat() удобно применять, когда несколько треков имеют одинаковый размер. Вместо «1fr 1fr 1fr 1fr» записывают «repeat(4, 1fr)» — код становится компактнее и читабельнее. Также repeat() поддерживает ключевые слова auto-fill и auto-fit для адаптивных сеток: repeat(auto-fill, minmax(200px, 1fr)) автоматически распределяет колонки по доступной ширине. В калькуляторе вы можете включить опцию «Использовать repeat()», и код сгенерируется в сжатом виде.

Чем gap отличается от margin между элементами?

Свойство gap задает отступы только между элементами сетки, не затрагивая внешние края контейнера. Margin же добавляет пространство вокруг каждого элемента, включая крайние, что приводит к нежелательным отступам по краям и усложняет расчеты. Кроме того, gap не вызывает схлопывания (margin collapsing) и корректно работает с единицами fr. Рекомендуется всегда использовать gap для промежутков в grid-раскладке.

В чём разница между justify-items и justify-content?

justify-items управляет горизонтальным положением содержимого внутри ячейки сетки (stretch, start, center, end). justify-content определяет распределение самих треков (колонок) внутри контейнера, когда их суммарная ширина меньше ширины контейнера. Аналогично align-items управляет вертикальным выравниванием в ячейке, а align-content — распределением строк. В калькуляторе вы можете переключать эти значения и сразу видеть разницу в превью.

Как сделать адаптивную (responsive) сетку на CSS Grid?

Для создания адаптивной grid-сетки используйте единицы fr вместо фиксированных значений, комбинируйте с media-запросами или применяйте конструкцию repeat(auto-fill, minmax(min, max)). Калькулятор помогает подобрать базовую конфигурацию, которую затем можно дополнить медиа-запросами для перестройки на мобильных устройствах. Например, 3 колонки на десктопе переключаются на 1 колонку на экранах уже 768px.

Полезная информация

Используйте единицы fr вместо процентов для пропорционального распределения — они автоматически учитывают gap

Комбинируйте фиксированные (px) и гибкие (fr) треки для сайдбаров: 250px 1fr

Начинайте с пресета, затем корректируйте — это быстрее, чем строить сетку с нуля

Применяйте gap вместо margin к отдельным элементам для единообразных отступов

Для адаптивной галереи используйте repeat(auto-fill, minmax(200px, 1fr)) — создайте базу в калькуляторе и доработайте вручную

Свойства justify-content и align-content работают, когда общий размер треков меньше контейнера

Тестируйте сетку с разным количеством элементов — ползунок «Элементов» помогает увидеть, как ведет себя раскладка при переполнении или недостаче

Калькулятор CSS Grid постоянно обновляется с учетом новых возможностей спецификации и обратной связи пользователей.

Все вычисления и генерация кода выполняются локально в вашем браузере. Никакие данные не отправляются на сервер, что обеспечивает полную конфиденциальность и мгновенную скорость работы инструмента. Сгенерированный код соответствует актуальной спецификации CSS Grid Layout Module Level 2.

Если у вас есть предложения по улучшению генератора CSS Grid или вопросы по работе с grid-раскладками, обращайтесь через форму обратной связи. Мы стремимся сделать инструмент максимально полезным для разработчиков всех уровней.

Комментарии (1)

Был ли полезен этот инструмент?

Руслан Авдеев (автор проекта)• 1 янв. 2024 г., 00:00

🎉 Спасибо, что используете наши инструменты! Все инструменты на ToolFox полностью бесплатны и постоянно улучшаются. 📝 Пожалуйста, оставляйте комментарии: - Если инструмент работает некорректно - Если есть идеи по улучшению - Поделитесь своим опытом использования 👍 Ставьте лайки/дизлайки - это помогает мне понять, какие инструменты нуждаются в доработке. Я обновляю сайт каждую неделю на основе вашей обратной связи. ⭐ Если вам нравится ToolFox — буду благодарен за отзыв о сайте в Яндекс.Браузере (нажмите на ⋮ → «Оценить сайт» в панели браузера). Это помогает другим людям находить наши инструменты! 😊 Также вы можете написать мне напрямую в Telegram: @avdeevrus Все доработки и улучшения по вашим пожеланиям делаю бесплатно! Благодарю за доверие и использование ToolFox! 🚀