Генератор 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, для додаткового форматування відступів.