⭐ 0
🔍
Текст Изображение PDF и Документи Аудио Музика Електроника Време Полезни програми Валидатори Езотерика Игри

Светият Граал CSS Grid Layout — Готов код

Проектирайте визуално оформления на CSS Grid: задайте колони, редове и празнини, след това въведете имена на области в клетки, за да изградите зони на шаблони на мрежата — с предварителен преглед на живо и копируеми CSS и HTML.

Въведете име във всяка клетка по-долу; клетки с едно и също име се сливат в един регион с зони на шаблони.

Обработка... 0%

Резултат

Тази страница отваря генератора на мрежа, предварително зареден с оформлението на светия граал: три колони и три реда, с горен и долен колонтитул, обхващащи цялата ширина и навигационен/главен/страничен ред между тях. Заглавният ред използва автоматична височина, средният ред запълва оставащото пространство, а двете странични колони са фиксирани на 200px, докато основната колона заема останалото.

Оформлението на светия граал спечели името си, защото беше наистина трудно да се изгради надеждно преди CSS Grid - години на плаващи хакове, оформления на таблици и абсолютно позициониране се опитаха да фалшифицират тази точна форма. С grid-template-areas той се свива до пет наименувани региона и шепа размери на песни, поради което остава стандартният първи пример за преподаване на CSS Grid.

Всяко число и пропуск на тази страница все още са активни: свийте страничните колони, добавете четвърти ред или преименувайте област и прегледът и копираният CSS се актуализират незабавно. Копирайте CSS и HTML блоковете направо във вашия проект - всичко работи локално във вашия браузър, нищо не се качва.

🛡️
Изпълнява се в браузъра

Вашите файлове и данни никога не напускат това устройство. Обработката се извършва изцяло офлайн. 100% сигурно.

Приети формати и правила

  • Входове на числа за 1–6 колони и редове, плюс отделни контроли за празнина в колона и празнина в ред, които се комбинират в една стойност на празнина, когато съвпадат.
  • A named-areas mode: type an area name straight into any cell of the live grid; инструментът изгражда валиден низ за зони на шаблони и предупреждава, когато имената не образуват чисти правоъгълници.
  • Копируем CSS блок (дисплей: решетка, колони/редове-решетка-шаблон, празнина, зони-шаблон-решетка) плюс съвпадащ HTML скелет с един div на зоната на мрежата за наименуван регион.

Ключови предимства

✓ Въведете име направо в която и да е клетка и съвпадащите имена се сливат в една област с мрежови шаблони — без избор с плъзгане, без отгатване на ръка на синтаксиса на низа в кавички.
✓ Решетката за предварителен преглед на живо преоразмерява и оцветява отново при всяка промяна, така че виждате точните следи на колони и редове и всеки именуван регион, преди да копирате един ред от CSS.
✓ Предварителни настройки като класическото оформление на светия граал и тясната странична лента ви дават истинска, работеща декларация за зони на шаблони на мрежа, от които да започнете, вместо празна мрежа.

Сценарии на употреба

  • • Създайте класическата обвивка на страницата на светия граал — горен и долен колонтитул с пълна ширина с навигационен/главен/страничен среден ред — като въвеждате имена на области вместо ръкописни grid-template-areas.
  • • Оформете страница с настройки или администраторско табло със странична лента с фиксирана ширина до колона с гъвкаво съдържание и копирайте точния CSS и HTML, след като прегледът на живо изглежда правилно.
  • • Проверете дали набор от наименувани области действително образува валидни правоъгълници преди изпращане - инструментът маркира точните имена, които биха нарушили областите на шаблона на мрежата в браузъра.