Визуелно пројектовање CSS Grid распореда
CSS Grid Layout представља двомензионални систем за управљање распоредом елемената на веб-страници. За разлику од једнодимензионалног Flexbox-а, Grid омогућава истовремено дефинисање колона и редова. Алат CSS Grid Генератор омогућава вам да визуелно конфигуришете структуру мреже, одредите димензије појединачних трака и поставите елементе унутар дефинисаног простора.
Процес почиње дефинисањем броја колона и редова, након чега се уређују њихове појединачне димензије и међусобни размаци. Након што поставите основну мрежу, позиционирање елемената врши се једноставним превлачењем миша преко ћелија. Алат аутоматски генерише чист CSS и HTML код који је спреман за интеграцију у ваш пројекат.
Параметри за подешавање мреже
Да бисте изградили жељени распоред, на располагању су вам следећи улазни параметри:
- Колоне: Бројчана вредност у распону од 1 до 12.
- Редови: Бројчана вредност у распону од 1 до 12.
- Размак између колона: Вредност изражена у пикселима, од 0 до 48px.
- Размак између редова: Вредност изражена у пикселима, од 0 до 48px.
- Димензије колона: Било која важећа CSS Grid вредност, као што су
1fr,200px,auto,min-contentилиminmax(120px, 1fr). - Димензије редова: Такође прихвата све стандардне CSS вредности за величину трака, укључујући фракције, пикселе и функције за ограничавање опсега.
Постављање ставки унутар мреже врши се обележавањем правоугаоних области превлачењем преко ћелија. Алат подржава креирање највише 16 појединачних ставки.
Разумевање јединица и функција у генерисаном коду
Приликом дефинисања димензија колона и редова, коришћење фракционе јединице (fr) омогућава флексибилну расподелу слободног простора унутар контејнера. На пример, ако имате три колоне са димензијама 1fr, простор ће бити подељен на три једнака дела.
Како би генерисани CSS код остао што краћи и прегледнији, алат примењује неколико правила за оптимизацију:
- Груписање истих димензија: Ако више суседних колона или редова дели идентичну вредност величине, алат их у излазном CSS-у аутоматски пакује помоћу CSS функције
repeat(). - Оптимизација размака: Иако се Размак између колона и Размак између редова подешавају независно, уколико поставите идентичне вредности за оба поља, алат ће их у коду спојити у јединствено скраћено својство
gap. - Валидација уноса: Ако у поље за величину траке унесете неисправну вредност (на пример
not-a-grid-track), поље ће бити означено као неважеће, али ће излазни CSS задржати последњу исправну вредност како се код не би покварио.
Постављање ставки и управљање слојевима
Када превучете мишем преко мреже и пустите тастер, креира се позиционирани елемент који заузима означене колоне и редове. Свака нацртана ставка добија своја специфична grid-column и grid-row правила у CSS-у, као и одговарајући div елемент унутар HTML контејнера.
Алат дозвољава преклапање ставки на мрежи. Уколико нацртате нову ставку преко већ постојеће, она која је нацртана касније биће позиционирана изнад претходне. Свака ставка на себи има ознаку "×" чијим се кликом тај конкретни елемент уклања из распореда. Такође, опција "Очисти ставке" омогућава вам да тренутно уклоните све елементе, што резултује празним HTML контејнером и бројем од 0 ставки. Опција "Додај ставку" генерише нови HTML елемент у структури.
Брзи шаблони за уобичајене распореде
За убрзани рад, алат нуди неколико унапред дефинисаних шаблона који покривају најчешће структуре веб-страница:
- Бочна трака: Класичан распоред са главним делом за садржај и бочним панелом за навигацију или додатне информације.
- Заглавље и подножје: Тродиелни распоред који садржи горњу траку (header), средишњи део за садржај и доњу траку (footer).
- Галерија: Шаблон који аутоматски генерише структуру од 3 колоне, 2 реда и 3 постављене ставке.
- Контролна табла (Dashboard): Комплекснији распоред погодан за административне интерфејсе са више повезаних информационих блокова.
Приватност и локална обрада података
Ваша мрежа се креира директно у вашем прегледачу. Ништа што овде подесите не шаље се на BroBroGo. Сви прорачуни, генерисање кода и визуелни приказ обављају се локално на вашем уређају, што значи да ваши подаци о распореду и структури не напуштају ваш веб-прегледач.
Често постављана питања
Како да поставим ставке на мрежу (grid)?
Кликните и превуците преко ћелија да бисте означили правоугаоник — када пустите, то постаје позиционирани елемент који се протеже кроз те колоне и редове. Свака ставка коју нацртате добија своја grid-column и grid-row правила у CSS-у и одговарајући div у HTML-у. Ставке се могу преклапати, при чему она нацртана касније долази на врх; користите ознаку × на ставци да бисте је уклонили.
Могу ли колоне и редови бити различитих величина?
Да. Сваки ред и колона имају своје поље за величину, где можете уписати било коју исправну вредност — 1fr, 200px, auto, min-content или minmax(120px, 1fr). Редови или колоне који деле исту величину биће груписани помоћу repeat() функције како би код остао кратак. Размаци између колона и редова се подешавају засебно, а спајају се у јединствено својство gap када су им вредности идентичне.
Шта да радим са генерисаним кодом?
Копирајте и CSS и HTML код. HTML вам даје контејнер са по једним div-ом за сваку ставку, док CSS дефинише мрежу и позиционира сваки елемент. Налепите оба у свој пројекат и добићете идентичан распоред који сте овде нацртали.