Генератор 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.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
column-gap: 10px;
row-gap: 10px;
}Задайте количество колонок и строк сетки.
Настройте размеры треков — fr, px, %, minmax().
Бесплатный виджет с бэклинком на ваш сайт
Загрузка…
Ключевое различие: **global** меняет переменную модуля, а **nonlocal** — переменную во внешней функции. Выбирайте по области видимости.
Битрикс24 в 2026 году запустил набор AI‑инструментов и платформу для вайбкодинга, позволяющие автоматизировать разработку и сократить затраты до 150 000 рублей в год.
Оптимизировать потребление тепла в цементопечи можно с помощью Python‑скриптов, которые анализируют данные датчиков и автоматически регулируют режимы, снижая расходы до 15 % уже в 2026 году.
При необходимости нарисуйте 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 или данных