Как визуально создать раскладку CSS Grid?

Используйте «Добавить столбец» и «Добавить строку», чтобы задать сетку, выберите единицу измерения для каждой дорожки и настройте «Промежуток между столбцами» и «Промежуток между строками». Затем нажмите «Копировать», чтобы взять CSS или соответствующий HTML.

Сколько столбцов и строк можно добавить и какие единицы измерения доступны?

До 12 столбцов и 12 строк. Каждая дорожка может быть в 1fr, 2fr, 3fr, auto, фиксированных значениях px, процентах, min-content, max-content или диапазонах вида minmax(100px, 1fr).

Есть ли готовые раскладки для начала работы?

Да. В «Шаблоны» входят «Классическая раскладка», «Боковая панель + контент», «12 столбцов» и «Фотогалерея». Выберите один, затем редактируйте дорожки и промежутки под свою страницу.

Как сделать 12-колоночную сетку, как в Bootstrap?

Выберите пресет «12 столбцов», который устанавливает двенадцать колонок 1fr с промежутком 16px. Затем вы можете изменить ползунок «Промежуток между столбцами» в диапазоне от 0 до 48px.

Отправляет ли инструмент мою сетку куда-либо и можно ли поделиться раскладкой?

Всё работает в вашем браузере, и ничего не загружается. Инструмент создан так, чтобы восстанавливать конфигурацию из URL страницы, так что ссылка может воссоздать вашу сетку.

Это правда бесплатно?

Да. Все инструменты бесплатны, без учётной записи и банковской карты. Работа выполняется на вашем устройстве, а не на наших серверах, что и позволяет оставаться бесплатными.

Работает на мобильных устройствах?

Да. Работает в современных мобильных браузерах на iOS и Android, ничего устанавливать не нужно.

🟦

Генератор CSS Grid — бесплатно

Визуально спроектируйте CSS grid — дорожки, единицы и промежутки — и скопируйте сгенерированный CSS и HTML.

Работает в браузереБез регистрации и всплывающих оконРегистрация не требуетсяБесплатно навсегда

Работает офлайн после загрузки

Проектируйте CSS grid визуально: добавляйте столбцы и строки, смешивайте единицы fr/px/auto/min-content, регулируйте промежутки и смотрите живой предпросмотр. Копируйте production-ready CSS и соответствующий HTML.

Шаблоны

Столбцы (3)

Строки (2)

Промежуток между столбцами: 16pxПромежуток между строками: 16px

Живой предпросмотр

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}

html

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 Всё работает в вашем браузере — ничего не загружается.

Как это работает

Визуально проектируйте CSS grid: добавляйте до 8 столбцов и 8 строк, задавайте каждому треку fr, px, auto или min/max-content, настраивайте отступы между строками и столбцами. Пронумерованный живой предпросмотр обновляется мгновенно, а сгенерированный CSS grid-template и соответствующий HTML копируются в буфер обмена одним кликом.

1
Сформируйте сетку
Добавляйте/удаляйте столбцы и строки кнопками + и −.
2
Настройте треки
Каждый столбец и строка получают свою единицу (1fr, 100px, auto…).
3
Настройте отступы
Отдельные ползунки для row-gap и column-gap.
4
Скопируйте код
Готовый к использованию CSS и соответствующий скелет HTML.

Всё работает в вашем браузере — ничего не загружается на сервер.

Генератор CSS Grid — бесплатно

Как это работает

Похожие инструменты

Генератор CSS Flexbox

Генератор CSS clamp()

Бумага для печати — в линейку, в клетку, в точку и нотная (PDF)

Часто задаваемые вопросы