Генератор CSS Grid визуально собирает двумерную сетку: задаёте количество колонок и строк, размеры через `fr`, `px`, `%`, `minmax()`, `auto-fit`/`auto-fill` — и получаете готовый CSS с `grid-template-columns`, `grid-template-rows`, `grid-template-areas`. Поддерживается перетаскивание областей (areas) для классических макетов: header/sidebar/main/footer.
Инструмент полезен верстальщикам, которые переходят с Bootstrap grid на CSS Grid, и frontend-разработчикам, собирающим адаптивные лендинги. Код экспортируется в чистый CSS, Tailwind (`grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]`) или Bootstrap-утилиты. Есть пресеты: holy grail layout, карточки товаров, dashboard, magazine grid.
Поддержка всех современных браузеров — Chrome, Firefox, Safari, Edge. Subgrid доступен с Chrome 117, Safari 16, Firefox 71+. Для старых браузеров можно добавить fallback на Flexbox.
Задайте количество колонок и строк сетки.
Настройте размеры треков — fr, px, %, minmax().
Бесплатный виджет с бэклинком на ваш сайт
Загрузка…
Для корректного взаимодействия API используйте основные HTTP‑коды: 200 — успех, 201 — создано, 400 — ошибка запроса, 401 — неавторизовано, 404 — не найдено и 500 — ошибка сервера.
Диаграммы архитектуры сохраняют критическую роль в DevOps, обеспечивая визуальное согласование, ускоряя автоматизацию и снижая риски внедрения новых сервисов.
PostgreSQL Benchmarking Tool измеряет производительность запросов за секунды, а оптимизация JOIN в SQLite сокращает время выполнения до 30 % уже в 2026 году.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
column-gap: 10px;
row-gap: 10px;
}При необходимости нарисуйте grid-template-areas.
Добавьте gap между строками и колонками.
Скопируйте CSS или Tailwind-классы.
Настройка колонок и строк с перетаскиванием областей.
Именованные области для семантичного layout — header, sidebar, main, footer.
Адаптивные сетки без media queries: `repeat(auto-fit, minmax(250px, 1fr))`.
Экспорт готовых классов и arbitrary-values Tailwind.
Holy grail, dashboard, masonry, magazine — готовые шаблоны сеток.
Для лучших результатов используйте современный браузер (Chrome, Firefox, Edge)
Все файлы обрабатываются локально в вашем браузере для максимальной безопасности
Сохраняйте результат сразу после обработки
Попробуйте разные настройки для оптимального результата
Grid — двумерный (колонки + строки одновременно), Flexbox — одномерный (только в одном направлении). Grid подходит для макетов страницы, Flex — для компонентов вроде хедера или тулбара.
`auto-fill` создаёт пустые треки, если элементов меньше, чем помещается. `auto-fit` — сжимает пустые треки до нуля и растягивает существующие элементы. Чаще нужен `auto-fit`.
`1fr` = 1 доля свободного пространства. В отличие от `%`, fr корректно учитывает `gap` и контент в `minmax()`. Запись `1fr 2fr` делит свободное место в пропорции 1:2.
Используйте `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))`. Карточки будут перестраиваться на столько колонок, сколько поместится с минимумом 250px.
Subgrid позволяет вложенному гриду унаследовать треки родителя — карточки выравниваются по строкам независимо от длины контента. Поддержка: Firefox 71+, Safari 16+, Chrome 117+.
Создайте QR-код из текста, URL или данных