Генератор CSS grid
Преобразуйте текстовый макет в реальную CSS сетку с именованными областями.
Генератор CSS grid
Вставьте примерный макет страницы, и этот инструмент преобразует его в рабочий код CSS grid. Напишите каждую строку макета на отдельной строке и повторите одно и то же слово в соседних ячейках, чтобы обозначить именованную область — «header header» на одной строке, «nav main» на следующей, «footer footer» на последней описывает классический трёхуровневый макет с полноширинным заголовком и подвалом. Инструмент читает повторяющиеся названия как области grid и автоматически генерирует соответствующее объявление grid-template-areas.
Параметры управляют остальной частью генерируемого CSS. Установите промежуток между ячейками в пикселях и при необходимости задайте явные ширины колонок или высоты строк, используя любой допустимый размер трэка CSS — единицы fr, auto или minmax(); оставьте оба поля пустыми, и инструмент распределит трэки равномерно. Включите правила для каждой области, чтобы получить готовый набор объявлений grid-area для каждой именованной секции с выбранным вами префиксом класса, так «header» становится .grid-header с готовностью. Переключатель адаптивности добавляет медиа-запрос max-width, который сворачивает весь макет в одну колонку для узких экранов, а переключатель HTML добавляет соответствующую разметку, чтобы вы могли видеть структуру рядом с CSS.
Если две ячейки с одним именем не образуют сплошной прямоугольник — L-форму или имя, которое пропускает ячейку — реальный CSS grid не может правильно отобразить эту область, поэтому инструмент отмечает это прямо в выводе как комментарий предупреждения вместо того, чтобы молча генерировать неправильные правила. Разрывы строк с любой операционной системы обрабатываются одинаково, и интерактивный счётчик под выводом отслеживает количество строк макета, именованных областей и символов в генерируемом CSS.
Всё работает локально в вашем браузере; макет, который вы создаёте, и полученный CSS код никогда никуда не отправляются. Скопируйте результат, загрузите его как файл .txt или отправьте вывод прямо в другой инструмент, например форматтер CSS, для дополнительного форматирования отступов.