Generator za CSS Grid

Določite stolpce in vrstice, povlecite čez celice za postavitev elementov ter z enim klikom kopirajte CSS mreže z ustreznim HTML-jem.

Prednastavitve
Elementi
CSS
HTML
Povlecite čez mrežo, da postavite element.

Vaša mreža se ustvari neposredno v vašem brskalniku. Nič od tega, kar nastavite tukaj, se ne prenaša na BroBroGo.

Pogosta vprašanja

Kako postavim elemente na mrežo?

Pritisnite in povlecite čez celice, da označite pravokotnik — ko spustite, postane to umeščen podrejeni element, ki se razteza čez te stolpce in vrstice. Vsak element, ki ga narišete, dobi svoje pravilo grid-column in grid-row v CSS ter ustrezen div v HTML. Elementi se lahko prekrivajo, pri čemer je tisti, ki je narisan kasneje, na vrhu; za odstranitev elementa kliknite ×.

Ali so lahko stolpci in vrstice različnih velikosti?

Da. Vsaka vrstica ali stolpec (track) ima svoje polje za velikost, kamor lahko vnesete katero koli vrednost mreže — 1fr, 200px, auto, min-content ali minmax(120px, 1fr). Vrstice ali stolpci z enako velikostjo so združeni v funkcijo repeat(), da ostane koda kratka. Razmik med stolpci in razmik med vrsticami se nastavljata ločeno, če pa sta enaka, se združita v en sam gap.

Kaj naj storim z generirano kodo?

Kopirajte kodi CSS in HTML vzporedno. HTML vam ponuja vsebnik z enim div-om na element, CSS pa definira mrežo in pozicionira vsak element. Obe prilepite v svoj projekt in dobili boste enako postavitev, kot ste jo narisali tukaj.

Napisala in pregledala uredniška ekipa BroBroGo.Zadnja posodobitev:

Vizualno oblikovanje mrežnih postavitev z orodjem Generator za CSS Grid

Generator za CSS Grid je specializirano orodje, ki omogoča vizualno načrtovanje mrežnih postavitev CSS z določanjem števila stolpcev, vrstic, njihovih velikosti ter medsebojnih razmikov. Z vlečenjem miške čez celice mreže lahko neposredno določate položaj posameznih elementov. Orodje nato samodejno ustvari ustrezno kodo CSS in HTML, ki jo lahko prekopirate in uporabite v svojem projektu.

Postopek oblikovanja poteka neposredno v spletnem brskalniku. Vsi podatki in nastavitve, ki jih vnesete v orodje, se obdelujejo lokalno, kar pomeni, da se nič od tega, kar nastavite tukaj, se ne prenaša na BroBroGo.

Vhodni parametri in omejitve generatorja

Za natančno določitev strukture mreže orodje sprejema naslednje vhodne parametre:

  • Stolpci: Številčna vrednost med 1 in 12.
  • Vrstice Vrstice: Številčna vrednost med 1 in 12.
  • Razmik med stolpci: Številčna vrednost med 0 in 48px.
  • Razmik med vrsticami Razmik med vrsticami: Številčna vrednost med 0 in 48px.
  • Velikosti stolpcev in vrstic: Vnos poljubne veljavne vrednosti za CSS grid, kot so 1fr, 200px, auto, min-content ali minmax(120px, 1fr).
  • Postavitev elementov: Označevanje pravokotnega območja z vlečenjem miške čez celice.

Orodje podpira postavitev največ 16 elementov hkrati. Če v polje za velikost vrstice ali stolpca vnesete neveljavno vrednost (na primer not-a-grid-track), se polje označi kot neveljavno, izhodna koda CSS pa ohrani zadnjo veljavno vrednost.

Pravila generiranja kode in združevanje lastnosti

Pri spreminjanju parametrov in risanju elementov generator sledi natančnim pravilom za optimizacijo izhodne kode:

  1. Združevanje enakih velikosti s funkcijo repeat(): Če imajo sosednje vrstice ali stolpci enako definicijo velikosti, jih orodje v izhodnem CSS-ju združi v krajši zapis z uporabo funkcije repeat().
  2. Združevanje razmikov v lastnost gap: Razmik med stolpci in razmik med vrsticami se nastavljata ločeno. Če sta vrednosti obeh razmikov enaki, ju orodje v končni kodi CSS združi v eno samo lastnost gap.
  3. Prekrivanje elementov: Elementi se na mreži lahko prekrivajo. Element, ki ga narišete kasneje, se pozicionira nad predhodno narisane elemente. Vsak element ima v desnem zgornjem kotu gumb "×", s klikom na katerega ga odstranite.
  4. Upravljanje elementov: Klik na gumb "Dodaj element" ustvari nov element HTML. Klik na gumb "Počisti elemente" odstrani vse postavljene elemente, kar izprazni vsebnik HTML in ponastavi števec elementov na 0.

Hitro prototipiranje s prednastavitvami

Orodje vsebuje štiri vnaprej pripravljene prednastavitve, ki pokrivajo najpogostejše strukturne vzorce v spletnem oblikovanju:

  • Stranska vrstica: Postavitev z glavnim vsebinskim delom in stranskim stolpcem.
  • Glava in noga: Klasična trislojna postavitev z vrhnjim in spodnjim pasom.
  • Galerija: Prednastavitev, ki samodejno ustvari mrežo s 3 stolpci, 2 vrsticama in 3 elementi.
  • Nadzorna plošča: Kompleksnejša razporeditev elementov, primerna za administrativne vmesnike.

Razumevanje izhodne kode (CSS in HTML)

Generator ob vsaki spremembi posodobi dva bloka kode:

CSS koda

Vsebuje definicijo mrežnega vsebnika z lastnostmi display: grid, grid-template-columns, grid-template-rows in definicijo razmikov. Za vsak umeščeni element se ustvari ločen razred z natančnima lastnostma grid-column in grid-row, ki določata začetno in končno linijo mreže, čez katero se element razteza.

HTML koda

Generira se koda za krovni vsebnik (grid container), znotraj katerega so ugnezdeni posamezni elementi div za vsak narisan element na mreži.

Pogosta vprašanja (FAQ)

Kako postavim elemente na mrežo?
Pritisnite in povlecite čez celice, da označite pravokotnik — ko spustite, postane to umeščen podrejeni element, ki se razteza čez te stolpce in vrstice. Vsak element, ki ga narišete, dobi svoje pravilo grid-column in grid-row v CSS ter ustrezen div v HTML. Elementi se lahko prekrivajo, pri čemer je tisti, ki je narisan kasneje, na vrhu; za odstranitev elementa kliknite ×.

Ali so lahko stolpci in vrstice različnih velikosti?
Da. Vsaka vrstica ali stolpec (track) ima svoje polje za velikost, kamor lahko vnesete katero koli vrednost mreže — 1fr, 200px, auto, min-content ali minmax(120px, 1fr). Vrstice ali stolpci z enako velikostjo so združeni v funkcijo repeat(), da ostane koda kratka. Razmik med stolpci in razmik med vrsticami se nastavljata ločeno, če pa sta enaka, se združita v en sam gap.

Kaj naj storim z generirano kodo?
Kopirajte kodi CSS in HTML vzporedno. HTML vam ponuja vsebnik z enim div-om na element, CSS pa definira mrežo in pozicionira vsak element. Obe prilepite v svoj projekt in dobili boste enako postavitev, kot ste jo narisali tukaj.

Koliko elementov lahko največ dodam na mrežo?
Orodje podpira postavitev največ 16 elementov hkrati. Če želite ustvariti prazno mrežo brez elementov, lahko uporabite gumb za čiščenje elementov, kar bo izpraznilo HTML vsebnik.

Generator za CSS Cubic BezierPovlecite ročici, da oblikujete krivuljo prehoda, opazujte gibanje pike v primerjavi z enakomernim in kopirajte vrednost cubic-bezier().Generator za FlexboxNastavite flex vsebnik in njegove elemente z vizualnimi kontrolami, opazujte odziv postavitve v živo in kopirajte CSS z enim klikom.Generator za box-shadowPovlecite drsnike, da oblikujete senco elementa, zložite plasti za večjo globino in takoj kopirajte končni CSS.Generator prelivovUstvarite linearen, radialen ali stožčast preliv, dodajte barvne točke, določite smer in kopirajte CSS z enim klikom.Generator za border-radiusZaoblite vsak kot z drsniki, oblikujte organske mehurčke z eliptičnim načinom in takoj kopirajte CSS.Kalkulator za CSS clamp()Vnesite velikost za male in velike zaslone ter pridobite tekočo vrednost clamp(), ki se vmes gladko prilagaja — za velikosti pisav, paddinge, margine ali gape.