CSS Grid Генератор

Поставете ги Вашите колони и редови, повлечете преку ќелиите за да поставите елементи и копирајте го CSS-кодот за мрежата со соодветниот HTML со еден клик.

Претпоставки
Елементи
CSS
HTML
Повлечете преку мрежата за да поставите елемент.

Вашата мрежа се гради директно во Вашиот прелистувач. Ништо од она што го поставувате тука не се испраќа на BroBroGo.

ЧПП

Како да поставам елементи на мрежата (grid)?

Притиснете и повлечете преку ќелиите за да означите правоаголник — кога ќе пуштите, тој станува поставен подреден елемент што ги опфаќа тие колони и редови. Секој елемент што ќе го нацртате добива сопствено grid-column и grid-row правило во CSS и соодветен div во HTML. Елементите може да се преклопуваат, при што оној што е нацртан подоцна стои најгоре; користете го знакот × на елементот за да го отстраните.

Може ли колоните и редовите да бидат со различни големини?

Да. Секоја патека има сопствено поле за големина и таму можете да внесете која било вредност за grid — 1fr, 200px, auto, min-content или minmax(120px, 1fr). Патеките што споделуваат иста големина се спојуваат во repeat() за излезот да остане краток. Празнините меѓу колоните и редовите се поставуваат посебно и се спојуваат во една празнина (gap) кога се совпаѓаат.

Што да правам со генерираниот код?

Копирајте ги CSS и HTML кодовите напоредно. HTML-кодот ви го дава контејнерот со еден div за секој елемент, а CSS-кодот ја дефинира мрежата и го позиционира секој елемент. Вметнете ги двете во Вашиот проект и ќе го добиете истиот распоред што го нацртавте тука.

Напишано и проверено од уредничкиот тим на BroBroGo.Последно ажурирано:

Вовед во CSS Grid Layout

CSS Grid Layout претставува дволимензионален систем за распоредување на елементите на веб-страниците. За разлика од постарите методи, овој систем овозможува истовремена контрола врз колоните и редовите, со што се поедноставува изградбата на комплексни интерфејси. Алатката CSS Grid Генератор овозможува визуелно дизајнирање на ваквите мрежи преку дефинирање на бројот на колони, редови, нивните големини и празнините меѓу нив. Со влечење преку ќелиите на мрежата се поставуваат поединечните елементи, а алатката автоматски го генерира потребниот CSS и HTML код кој може директно да се копира во соодветниот проект.

Конфигурирање на параметрите: Колони, редови и празнини

За да се изгради функционална мрежа, потребно е да се постават основните влезни параметри во интерфејсот на алатката:

  • Колони: Бројот на колони се поставува во опсег од 1 до 12.
  • Редови: Бројот на редови се поставува во опсег од 1 до 12.
  • Празнина меѓу колони: Се дефинира со вредност помеѓу 0 и 48px.
  • Празнина меѓу редови: Се дефинира со вредност помеѓу 0 и 48px.

Секоја патека (колона или ред) има сопствено поле за големина каде што може да се внесе која било валидна CSS вредност за мрежа. На пример, може да се користат фиксни вредности како 200px, релативни вредности како 1fr, автоматско прилагодување со auto и min-content, или флексибилни опсези преку функцијата minmax(120px, 1fr).

Доколку за големина на некоја патека се внесе невалидна вредност (на пример, not-a-grid-track), соодветното влезна поле се означува како невалидно. Во тој случај, генерираниот CSS излез ја задржува последната валидна вредност за да се спречи рушење на кодот.

Правила за генерирање на CSS и HTML код

При користење на алатката, генерирањето на кодот се потпира на неколку дефинирани правила кои обезбедуваат чиста структура:

  1. Кратење со repeat(): Патеките што споделуваат иста големина автоматски се спојуваат во функцијата repeat() во излезниот CSS код за да се намали неговата должина.
  2. Спојување на празнините: Иако празнината меѓу колоните и празнината меѓу редовите се поставуваат независно, тие се спојуваат во едно единствено својство gap во CSS кодот доколку нивните вредности се совпаѓаат.
  3. Поставување елементи: Со притискање и влечење преку ќелиите се дефинира правоаголна површина. По отпуштање на глувчето, се креира подреден елемент кој ги опфаќа означените колони и редови. Секој нацртан елемент добива сопствено grid-column и grid-row правило во CSS и соодветен div во HTML.
  4. Преклопување и лимити: Алатката поддржува максимум 16 елементи. Елементите може да се преклопуваат, при што оној што е нацртан подоцна се позиционира најгоре. Секој елемент содржи знак "×" чие кликнување го отстранува од мрежата.
  5. Контролни функции: Копчето "Додај елемент" генерира нов HTML елемент, додека опцијата "Исчисти елементи" резултира со празен HTML контејнер и бројка од 0 елементи.

Користење на претпоставки за брз распоред

Алатката нуди неколку готови претпоставки (presets) кои овозможуваат инстантна визуелизација на стандардни веб-структури:

  • Странична лента: Распоред со главен простор за содржина и странична колона за навигација или дополнителни информации.
  • Заглавие и подножје: Класична структура со дефинирани зони на врвот и на дното на страницата.
  • Галерија: Оваа претпоставка автоматски генерира мрежа со 3 колони, 2 реда и 3 поставени елементи.
  • Контролна табла: Комплексен распоред погоден за апликации кои бараат преглед на повеќе независни информативни панели.

Приватност и обработка на податоците

Вашата мрежа се гради директно во Вашиот прелистувач. Ништо од она што го поставувате тука не се испраќа на BroBroGo.

Често поставувани прашања (FAQ)

Како да поставам елементи на мрежата (grid)?
Притиснете и повлечете преку ќелиите за да означите правоаголник — кога ќе пуштите, тој станува поставен подреден елемент што ги опфаќа тие колони и редови. Секој елемент што ќе го нацртате добива сопствено grid-column и grid-row правило во CSS и соодветен div во HTML. Елементите може да се преклопуваат, при што оној што е нацртан подоцна стои најгоре; користете го знакот × на елементот за да го отстраните.

Може ли колоните и редовите да бидат со различни големини?
Да. Секоја патека има сопствено поле за големина и таму можете да внесете која било вредност за grid — 1fr, 200px, auto, min-content или minmax(120px, 1fr). Патеките што споделуваат иста големина се спојуваат во repeat() за излезот да остане краток. Празнините меѓу колоните и редовите се поставуваат посебно и се спојуваат во една празнина (gap) кога се совпаѓаат.

Што да правам со генерираниот код?
Копирајте ги CSS и HTML кодовите напоредно. HTML-кодот ви го дава контејнерот со еден div за секој елемент, а CSS-кодот ја дефинира мрежата и го позиционира секој елемент. Вметнете ги двете во Вашиот проект и ќе го добиете истиот распоред што го нацртавте тука.

Колку најмногу елементи можам да додадам на мрежата?
Алатката поддржува поставување на максимум 16 елементи истовремено во рамките на еден распоред.

CSS Cubic Bezier ГенераторПовлечете ги двете рачки за да обликувате крива на транзиција, следете го движењето на точката во споредба со рамномерното и копирајте ја вредноста cubic-bezier().Генератор на FlexboxПоставете flex контејнер и неговите елементи со визуелни контроли, следете ги промените во живо и копирајте го CSS-кодот со еден клик.Генератор на Box ShadowПовлечете ги лизгачите за да обликувате box-shadow, наредете слоеви за длабочина и копирајте го готовиот CSS веднаш.Генератор на градиентиНаправете линеарен, радијален или коничен градиент, додајте точки на боја, поставете насока и копирајте го CSS-кодот со еден клик.Генератор на Border RadiusЗаоблете го секој агол со лизгачи, обликувајте органски форми со елиптичниот режим и копирајте го CSS-кодот веднаш.Калкулатор за CSS clamp()Внесете големина за мали и големи екрани и добијте флуидна clamp() вредност што се скалира непречено помеѓу нив — за големини на фонтови, внатрешни и надворешни маргини или празнини.