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

CSS Grid Генератор

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

🔒 Обработва се изцяло във вашия браузър - нищо, което въвеждате тук, никога не се качва.

Въведете име във всяка клетка по-долу; клетките с еднакво име се обединяват в една grid-template-areas област.

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

Резултат

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

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

Column-gap и row-gap по подразбиране са 8px и се комбинират в един ред за gap, когато съвпадат, а предварителният преглед на мрежата винаги отразява вашите пътеки за grid-template-columns и grid-template-rows, включително фиксираните пикселови колони от предварителна настройка като 200px странични ленти на holy grail. Копируемият изход покрива и двете страни: CSS блок, готов за вашия стилов файл, и съответстващ HTML скелет с по един grid-area div за всяка именувана област.

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

Харесва ли ви този инструмент? Смятате ли този продукт за полезен? Виждате ли потенциал в него и искате ли да го подкрепите?

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

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

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

  • Числови полета за 1–6 колони и редове, плюс отделни контроли за column-gap и row-gap, които се комбинират в една стойност за gap, когато са еднакви.
  • Режим с именувани области: въведете име на област директно в клетка на живата мрежа; инструментът изгражда валиден низ за grid-template-areas и предупреждава, когато имената не образуват правилни правоъгълници.
  • Копируем CSS блок (display: grid, grid-template-columns/rows, gap, grid-template-areas) плюс съответстващ HTML скелет с по един grid-area div за всяка именувана област.

Основни предимства

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

Случаи на употреба

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