Как пользоваться: CSS Grid генератор
- Укажите количество колонок и строк и отступы — или начните с пресета, например Holy grail.
- Измените размеры дорожек (над сеткой для колонок, слева для строк):
1fr,240px,auto,minmax(0, 1fr). - Выделите ячейки мышью, чтобы создать область, и задайте ей имя, например
headerилиsidebar. - Скопируйте CSS и HTML-каркас в свой проект.
Области сетки вкратце
grid-template-areas позволяет описать макет именами: каждая строка в кавычках — это ряд сетки, каждое слово — колонка, а точка (.) оставляет ячейку пустой. Дочерние элементы размещаются через grid-area: name, поэтому CSS читается как схема страницы.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar main";
}Размеры дорожек
| Значение | Что означает |
|---|---|
1fr | одна доля свободного пространства |
minmax(0, 1fr) | как 1fr, но длинное содержимое не может растянуть колонку |
auto | столько, сколько занимает содержимое |
240px, 20rem | фиксированный размер |
repeat(auto-fill, minmax(200px, 1fr)) | столько колонок, сколько поместится — удобно для сеток карточек |
Области должны быть прямоугольниками — инструмент позволяет рисовать только прямоугольники, поэтому CSS всегда валиден. Для одного ряда или столбца элементов часто проще flexbox. Также см.: Clamp Calculator, CSS Formatter.
Также ищут как: генератор grid layout, grid-template-areas генератор, адаптивная сетка css генератор, генератор макета css.
Инструменты, которые хорошо сочетаются с CSS Grid генератор
- Генератор CSS Flexbox — Смотрите, что делает каждое свойство flexbox: задавайте направление, перенос, justify-content, align-items и gap, добавляйте или удаляйте элементы, а также нажмите на любой элемент, чтобы настроить его flex-grow, shrink, basis, order и align-self.
- Генератор border-radius — Скруглите углы любого блока: перемещайте один ползунок для всех углов или задайте каждый угол отдельно, переключитесь на эллиптические углы для форм капли и листа и скопируйте самый короткий корректный CSS-код border-radius.
- Генератор box-shadow — Добавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке, затем скопируйте CSS для box-shadow или text-shadow.
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
Часто задаваемые вопросы
Как создать макет CSS Grid?
Задайте колонки и строки, выделите ячейки мышью, чтобы определить именованные области (header, sidebar, main…), и скопируйте сгенерированный CSS: grid-template-columns, grid-template-rows и grid-template-areas вместе с HTML.
В чём разница между 1fr и minmax(0, 1fr)?
У 1fr минимальный размер определяется содержимым, поэтому длинное слово или широкое изображение может расширить колонку. minmax(0, 1fr) позволяет колонке сжиматься меньше содержимого, сохраняя колонки равными.
Почему области сетки должны быть прямоугольными?
Спецификация CSS Grid допускает только прямоугольные именованные области; Г-образная область делает всё объявление grid-template-areas невалидным.
Как сделать сетку адаптивной?
Добавьте медиа-запрос, который переопределяет grid-template-columns и grid-template-areas для маленьких экранов — например, одна колонка с областями «header», «main» и «sidebar».
Можно ли установить CSS Grid генератор как веб-приложение и пользоваться им офлайн?
Да. CSS Grid генератор — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.