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

CSS генератор на мрежи

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

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

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

Резултат

Декларацията на grid-template-areas е една от най-четливите части на CSS, но само след като съществува – достигането до там на ръка означава преброяване на низове в кавички и съответстващи дължини на редове, а една несъответстваща клетка безшумно нарушава цялото оформление. Този генератор превръща това в директна манипулация: задайте броя на колоните и редовете, въведете име във всяка клетка на мрежата на живо и съвпадащите имена автоматично се сливат в един наименуван регион.

Под капака, всяка клетка, която оставите празна, се превръща в точка в генерирания низ с зони на шаблони на мрежа и всяка клетка, която наименувате, става част от правоъгълника с това име. CSS позволява на наименуван регион да заема само един чист правоъгълен блок, така че инструментът проверява това, докато пишете и ви казва точно кога името все още не образува валиден правоъгълник – вместо безшумно да произвежда CSS, браузърът ще отхвърли.

Column-gap и row-gap по подразбиране са 8px и се комбинират в една линия за празнина, когато съвпадат, а мрежата за предварителен преглед на живо винаги отразява вашите следи за колони с шаблони за мрежа и редове за шаблони за мрежа, включително колони с фиксирани пиксели от предварително зададени като страничните релси от 200 пиксела на светия граал. Резултатът, който може да се копира, покрива и двете страни: CSS блок, готов за вашата таблица със стилове, и съответстващ HTML скелет с един div с мрежова област на наименуван регион.

Grid и flexbox решават различни проблеми с оформлението, а css-flexbox-generator на този сайт е по-добрата отправна точка за едномерни оформления — единичен ред или колона от гъвкави елементи като лента за навигация или купчина карти. Вместо това посегнете към този генератор на мрежа, когато имате нужда от двуизмерен контрол, изрични редове и колони или именувани региони като горен/навигационен/основен/долен колонтитул; двата инструмента често завършват на една и съща страница, решетка за обвивката на страницата и flexbox вътре в нейните части. Като всеки инструмент на този сайт, той работи изцяло във вашия браузър — без качване, без акаунт.

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

Вашите файлове и данни никога не напускат това устройство. Обработката се извършва изцяло офлайн. 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, след като прегледът на живо изглежда правилно.
  • • Проверете дали набор от наименувани области действително образува валидни правоъгълници преди изпращане - инструментът маркира точните имена, които биха нарушили областите на шаблона на мрежата в браузъра.