Генератор CSS Grid
Соберите CSS-сетку (колонки, строки, gap) вживую и скопируйте CSS.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
CSS-сетка, собранная вживую
Выберите число колонок, строк и отступ: предпросмотр показывает ячейки в реальном времени, а CSS контейнера готов к копированию.
-
Задайте колонки
От 1 до 8 равных дорожек (1fr).
-
Задайте строки и gap
Число строк и отступ.
-
Скопируйте CSS
Примените к grid-контейнеру.
CSS контейнера (по умолчанию)
| Свойство | Значение |
|---|---|
| display | grid |
| grid-template-columns | repeat(3, 1fr) |
| grid-template-rows | repeat(2, 1fr) |
| gap | 8px |
Единица 1fr делит пространство поровну. Для адаптивности замените на repeat(auto-fit, minmax(...)). Всё генерируется локально.
Частые вопросы
В чём разница CSS Grid и Flexbox?
Flexbox раскладывает элементы по одной оси (строка или колонка); Grid работает в двух измерениях (колонки и строки сразу). Grid хорош для полных макетов страниц, Flexbox — для простых выравниваний.
Что значит repeat(3, 1fr)?
Сокращение для «3 колонки по 1 фракции каждая». Единица fr делит доступное пространство поровну. repeat(3, 1fr) создаёт три равные по ширине колонки, заполняющие контейнер.
Как сделать сетку адаптивной?
Замените фиксированное число на repeat(auto-fit, minmax(200px, 1fr)): колонки сами подстраиваются под ширину. Инструмент генерирует базу с фиксированным числом, которую можно затем адаптировать.
CSS для контейнера или ячеек?
Для контейнера: display: grid и свойства grid-template задают структуру. Дочерние ячейки сами размещаются в созданных дорожках.