🔲

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 позволяет визуально создать сетку (grid layout) и мгновенно получить готовый код. Инструмент предназначен для веб-разработчиков, верстальщиков и дизайнеров, которым необходимо быстро сконструировать адаптивную раскладку страницы без ручного написания CSS. Вы задаёте количество колонок и строк, указываете единицы измерения — fr, px, проценты, rem, auto, min-content, max-content — настраиваете отступы (gap) и параметры выравнивания (justify-items, align-items, justify-content, align-content). Результат отображается в реальном времени: живое превью сетки обновляется при каждом изменении параметров, а сгенерированный CSS и HTML код доступен для копирования одним кликом.

CSS Grid Generator экономит время на прототипировании макетов. Вместо того чтобы угадывать значения grid-template-columns и grid-template-rows, вы визуально подбираете нужную конфигурацию и забираете готовый код. Калькулятор поддерживает функцию repeat() для повторяющихся треков, позволяет настроить раздельные row-gap и column-gap, а встроенные пресеты — «Сайдбар + контент», «Holy Grail», «Dashboard», «Галерея» — дают мгновенный старт для типичных раскладок. Все вычисления выполняются локально в браузере, данные никуда не отправляются.

Генератор grid-сетки полезен при вёрстке лендингов, интернет-магазинов, панелей управления (дашбордов), портфолио, блогов и любых проектов, где требуется многоколоночная или многострочная компоновка. Благодаря поддержке дробных единиц (fr) и адаптивных значений auto, min-content, max-content инструмент подходит для создания отзывчивых (responsive) макетов, которые корректно масштабируются на мобильных и десктопных устройствах.

Работа с CSS Grid часто вызывает затруднения у начинающих разработчиков: сложно запомнить разницу между justify-items и justify-content, правильно подобрать единицы измерения, рассчитать пропорции. Наш визуальный калькулятор решает эту проблему — каждое изменение параметра немедленно отражается на превью, что формирует интуитивное понимание модели CSS Grid Layout. Инструмент также служит справочником по свойствам grid-контейнера: вы можете экспериментировать с выравниванием, менять gap и наблюдать результат без перезагрузки страницы.

Калькулятор CSS Grid можно использовать как учебное пособие и как рабочий инструмент разработчика одновременно. Студенты и новички получают наглядную визуализацию свойств, а опытные фронтенд-разработчики ускоряют процесс прототипирования, копируя готовый CSS-код прямо в свои проекты на React, Vue, Angular, Next.js и любых других фреймворках. Генератор Grid особенно удобен при совместной работе с дизайнерами: можно быстро воспроизвести макет из Figma и убедиться, что пропорции и отступы совпадают.

Визуальное построение сетки с live-превью в реальном времени
Поддержка единиц fr, px, %, rem, em, auto, min-content, max-content
До 12 колонок и 12 строк с гибкой настройкой каждого трека
Раздельная или единая настройка column-gap и row-gap
Полное управление выравниванием: justify-items, align-items, justify-content, align-content
Готовые пресеты популярных макетов (Holy Grail, Dashboard, Sidebar и др.)
Автоматическая генерация repeat() для одинаковых треков
Генерация чистого CSS и HTML кода с копированием в буфер
Полностью клиентская обработка — данные не покидают ваш браузер

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

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

Как пользоваться генератором 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-раскладками, обращайтесь через форму обратной связи. Мы стремимся сделать инструмент максимально полезным для разработчиков всех уровней.