Перейти к содержимому

Генератор CSS Grid

Бесплатный онлайн генератор CSS Grid. Визуальный редактор строк, столбцов, отступов с автоматической генерацией кода. Обработка в браузере.

Генератор CSS Grid — это бесплатный онлайн-инструмент, который визуально проектирует grid-макеты. Задавайте строки, столбцы, интервалы и размещение ячеек перетаскиванием с автоматической генерацией кода CSS Grid. Предпросмотр в реальном времени включён. Обработка в браузере без загрузки на сервер — полностью бесплатно для проектирования веб-макетов.

1
2
3
4
5
6
7
8
9
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; justify-items: stretch; align-items: stretch; }
HTML код
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>
lock Файлы не отправляются на сервер

Как использовать Генератор CSS Grid?

  1. Задайте количество строк и столбцов.
  2. Перетаскивайте ячейки для объединения областей или настройки размещения.
  3. Скопируйте сгенерированный код CSS Grid и используйте его в своём проекте.

Часто задаваемые вопросы о Генератор CSS Grid

В чём разница между CSS Grid и Flexbox?

CSS Grid предназначен для двумерных макетов (строки + столбцы), тогда как Flexbox — для одномерных (строка или столбец). Grid лучше подходит для сложных макетов страниц.

Что такое единица fr?

fr (fraction) — это пропорциональная единица, используемая в CSS Grid. Например, 1fr 2fr делит пространство в соотношении 1:2. Она очень полезна для адаптивных макетов.