Генератор CSS Grid
Визуально создавайте CSS Grid-макеты. Задайте строки, столбцы, отступы и скопируйте готовый CSS и HTML-код. Поддерживаются единицы fr, px и auto.
Возможности
Как использовать
1. Задайте количество строк и столбцов.
2. Настройте высоту строк и ширину столбцов (fr, px, auto).
3. Задайте отступы сетки (grid gap).
4. Скопируйте сгенерированный CSS и HTML.
Об этом инструменте
CSS Grid располагает содержимое сразу по строкам и столбцам, поэтому это естественный выбор для галерей, дашбордов и структуры страниц. Этот генератор визуально настраивает grid-контейнер: выберите число столбцов и строк, промежуток между ними и способ деления пространства между столбцами — равные доли через 1fr, автоматический размер, minmax(0, 1fr), чтобы длинное содержимое не распирало столбец, или фиксированные дорожки по 100px. Предпросмотр показывает, как элементы распределяются по дорожкам, а CSS записывается через repeat() — компактно и читаемо. Скопируйте его как основу, а затем расставляйте отдельные элементы через grid-column и grid-row в своей таблице стилей.