⭐ 0
🔍
Текст Слика ПДФ и документи Аудио Музика Електроника Време Комуналне услуге Валидатори Езотерично Игре

CSS Grid Генератор

Дизајнирајте CSS Grid распореде визуелно: подесите колоне, редове и размак, затим унесите називе области у ћелије да бисте изградили grid-template-areas — са приказом уживо и CSS и HTML кодом спремним за копирање.

🔒 У потпуности се обрађује у вашем претраживачу — ништа што овде унесете се никада не отпрема.

Унесите име у било коју ћелију испод; ћелије са истим именом се спајају у једну grid-template-areas област.

Обрада... 0%

Резултат

Декларација grid-template-areas је један од најчитљивијих делова CSS-а, али тек када постоји — долазак до ње ручно значи бројање стрингова под наводницима и усклађивање дужина редова, а једна неусклађена ћелија у тишини квари цео распоред. Овај генератор то претвара у директну манипулацију: подесите број колона и редова, унесите назив у било коју ћелију мреже уживо и одговарајући називи се аутоматски спајају у једну именовану област.

Испод хаубе, свака ћелија коју оставите празну постаје тачка у генерисаном стрингу grid-template-areas, а свака ћелија коју именујете постаје део правоугаоника тог имена. CSS дозвољава да именована област заузима само један уредан правоугаони блок, тако да алат то проверава док куцате и упозорава вас тачно када назив још увек не формира исправан правоугаоник — уместо да у тишини произведе CSS који ће прегледач одбацити.

Размак између колона и размак између редова подразумевано износе 8px и комбинују се у једну линију за размак када се подударају, а приказ мреже уживо увек осликава ваше траке grid-template-columns и grid-template-rows, укључујући фиксне колоне у пикселима из унапред припремљеног распореда, попут бочних трака од 200px код распореда светог грала. Излаз спреман за копирање покрива обе стране: CSS блок спреман за ваш стилски лист и одговарајући HTML костур са по једним grid-area div-ом за сваку именовану област.

Grid и flexbox решавају различите проблеме распореда, а css-flexbox-generator на овом сајту је боља полазна тачка за једнодимензионалне распореде — један ред или колону флексибилних ставки као што је навигациона трака или низ картица. Посегните за овим генератором мреже уместо тога када вам је потребна дводимензионална контрола, експлицитни редови и колоне или именоване области попут header/nav/main/footer; ова два алата често заврше на истој страници, grid за оквир странице, а flexbox унутар њених делова. Као и сваки алат на овом сајту, ради у потпуности у вашем прегледачу — без отпремања, без налога.

Уживате у овом алату? Мислите да је овај производ користан? Видите потенцијал у њему и желите да га подржите?

🛡️
Извршава се у прегледачу

Ваши фајлови и уноси никада не напуштају овај уређај. Обрада се одвија потпуно офлајн. 100% безбедно.

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

  • Поља за унос броја колона и редова од 1 до 6, плус одвојене контроле за размак између колона и размак између редова, које се комбинују у једну вредност када се подударају.
  • Режим именованих области: унесите назив области директно у било коју ћелију мреже уживо; алат гради исправан стринг grid-template-areas и упозорава када називи не формирају уредне правоугаонике.
  • CSS блок спреман за копирање (display: grid, grid-template-columns/rows, gap, grid-template-areas) плус одговарајући HTML костур са по једним grid-area div-ом за сваку именовану област.

Кључне предности

✓ Унесите назив директно у било коју ћелију и одговарајући називи се спајају у једну област grid-template-areas — без повлачења за селекцију, без ручног писања синтаксе са наводницима.
✓ Приказ мреже уживо мења величину и боју при свакој измени, тако да видите тачне траке колона и редова и сваку именовану област пре него што копирате иједну линију CSS-а.
✓ Унапред припремљени распореди попут класичног распореда светог грала и уске бочне траке дају вам стварну, функционалну декларацију grid-template-areas од које можете почети, уместо празне мреже.

Случајеви коришћења

  • • Направите класичан holy grail распоред странице — пун заглавље и подножје са средњим редом nav/main/aside — уносом имена области уместо ручног писања grid-template-areas.
  • • Распоредите страницу подешавања или администраторску таблу са бочном траком фиксне ширине поред флексибилне колоне са садржајем и копирајте тачан CSS и HTML чим приказ уживо изгледа како треба.
  • • Проверите да ли скуп именованих области заиста формира исправне правоугаонике пре објављивања — алат означава тачно она имена која би покварила grid-template-areas у прегледачу.