CSS Gridi generaator

Määrake veerud ja read, lohistage üle lahtrite elementide paigutamiseks ning kopeerige griddi CSS koos sobiva HTML-iga ühe klõpsuga.

Eelseadistused
Elemendid
CSS
HTML
Lohistage üle ruudustiku elemendi paigutamiseks.

Teie ruudustik luuakse otse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse.

KKK

Kuidas paigutada elemente ruudustikule?

Vajutage ja lohistage üle lahtrite ristküliku märgistamiseks — lahtilaskmisel saab sellest paigutatud alam-element, mis hõlmab neid veerge ja ridu. Iga joonistatud element saab CSS-is oma grid-column ja grid-row reegli ning vastava div-elemendi HTML-is. Elemendid võivad kattuda ja hiljem joonistatud element jääb peale; eemaldamiseks kasutage elemendil olevat ×-märgist.

Kas veerud ja read saavad olla erineva suurusega?

Jah. Igal real ja veerul on oma suuruse väli, kuhu saate sisestada mistahes grid-väärtuse — 1fr, 200px, auto, min-content või minmax(120px, 1fr). Sama suurust jagavad read/veerud koondatakse repeat() funktsiooni sisse, et väljund jääks lühikeseks. Veergude ja ridade vahed määratakse eraldi ning need koondatakse üheks gap-väärtuseks, kui need kattuvad.

Mida teha genereeritud koodiga?

Kopeerige CSS ja HTML kõrvuti. HTML annab teile konteineri, milles on üks div iga elemendi kohta, ja CSS määratleb ruudustiku ning positsioneerib iga elemendi. Kleepige mõlemad oma projekti ja saate täpselt sama paigutuse, mille siin joonistasite.

Kirjutanud ja üle vaadanud BroBroGo toimetus.Viimati uuendatud:

CSS Gridi generaator visuaalseks paigutuse planeerimiseks

CSS Grid on võimas kahemõõtmeline paigutussüsteem, mis võimaldab luua keerukaid veebidisaine. CSS Gridi generaator on tööriist, mis aitab seda süsteemi visuaalselt hallata, võimaldades määrata veergude ja ridade arvu, seadistada nende suurused ning lohistada elemente otse ruudustikule. Tööriist genereerib automaatselt puhta CSS- ja HTML-koodi, mida saab otse oma projekti kopeerida.

See lahendus sobib neile, kes soovivad kiiresti luua paigutuse prototüüpe, visualiseerida erinevate veergude ja ridade suuruste mõju või luua standardseid struktuure nagu külgribad, päised, jalused, galeriid ja töölauad ilma koodi käsitsi kirjutamata.

Tehnilised sisendparameetrid ja piirangud

Ruudustiku struktuuri ja käitumise määramiseks kasutatakse järgmisi sisendeid ja piiranguid:

  • Veerud: Täisarv vahemikus 1 kuni 12.
  • Read (Read): Täisarv vahemikus 1 kuni 12.
  • Veergude vahe: Number vahemikus 0 kuni 48px.
  • Ridade vahe (Ridade vahe): Number vahemikus 0 kuni 48px.
  • Veergude ja ridade suurused: Lubatud on kõik standardsed CSS grid-väärtused, näiteks 1fr, 200px, auto, min-content või minmax(120px, 1fr).
  • Elementide limiit: Tööriist toetab maksimaalselt 16 elementi.

Kui sisestate rea või veeru suuruseks vigase väärtuse (näiteks not-a-grid-track), märgistatakse sisendväli vigaseks, kuid CSS-väljundis säilitatakse viimane kehtiv väärtus.

Elementide paigutamine ja koodi genereerimine

Elementide paigutamine ruudustikule toimub hiirega lohistades. Vajutades ja lohistades üle lahtrite, saate märgistada ristkülikukujulise ala. Hiirenupu lahtilaskmisel luuakse paigutatud alam-element, mis hõlmab valitud veerge ja ridu.

Iga joonistatud element saab genereeritud CSS-is oma isikliku grid-column ja grid-row reegli ning vastava div-elemendi HTML-koodis. Elementide paigutamisel kehtivad järgmised reeglid:

  • Kattuvus: Elemendid võivad ruudustikus kattuda. Hiljem joonistatud element asetseb alati varasemate peal.
  • Eemaldamine: Elemendi saab eemaldada, klõpsates selle nurgas olevale "×" märgistusele.
  • Tühjendamine: Nupu "Tühjendenda elemendid" kasutamisel eemaldatakse kõik elemendid, mille tulemusel on HTML-konteiner tühi ja elementide arv on 0.
  • Käsitsi lisamine: Funktsioon "Lisa element" genereerib uue HTML-elemendi.

Koodi optimeerimise reeglid väljundis

Generaator optimeerib väljundkoodi automaatselt, et tagada puhas ja lühike CSS:

  1. Korduvad suurused: Kui mitu rida või veergu jagavad täpselt sama suurust, koondatakse need CSS-is repeat() funktsiooni sisse. Näiteks kolm 1fr suurusega veergu kirjutatakse kujul repeat(3, 1fr).
  2. Vahede koondamine: Veergude vahe ja ridade vahe määratakse sisendis eraldi. Kui mõlemad vahed on võrdsed, koondab generaator need CSS-is üheks lühendatud gap omaduseks.

Valmis eelseadistused

Kiireks alustamiseks sisaldab tööriist nelja levinud paigutuse eelseadistust:

  • Külgriba: Klassikaline paigutus, mis koosneb peamisest sisualast ja külgribast.
  • Päis ja jalus: Kolmeastmeline struktuur, kus sisu asub päise ja jaluse vahel.
  • Galerii: Eelseadistus, mis genereerib automaatselt 3 veergu, 2 rida ja paigutab sinna 3 elementi.
  • Töölaud (Dashboard): Keerukam mitmeosaline struktuur info ja moodulite organiseerimiseks.

Privaatsus ja andmetöötlus

Teie ruudustik luuakse otse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse, mis tagab, et kogu disainiprotsess ja sisestatud andmed jäävad kohalikku seadmesse.

Korduma kippuvad küsimused

Kuidas paigutada elemente ruudustikule?

Vajutage ja lohistage üle lahtrite ristküliku märgistamiseks — lahtilaskmisel saab sellest paigutatud alam-element, mis hõlmab neid veerge ja ridu. Iga joonistatud element saab CSS-is oma grid-column ja grid-row reegli ning vastava div-elemendi HTML-is. Elemendid võivad kattuda ja hiljem joonistatud element jääb peale; eemaldamiseks kasutage elemendil olevat ×-märgist.

Kas veerud ja read saavad olla erineva suurusega?

Jah. Igal real ja veerul on oma suuruse väli, kuhu saate sisestada mistahes grid-väärtuse — 1fr, 200px, auto, min-content või minmax(120px, 1fr). Sama suurust jagavad read/veerud koondatakse repeat() funktsiooni sisse, et väljund jääks lühikeseks. Veergude ja ridade vahed määratakse eraldi ning need koondatakse üheks gap-väärtuseks, kui need kattuvad.

Mida teha genereeritud koodiga?

Kopeerige CSS ja HTML kõrvuti. HTML annab teile konteineri, milles on üks div iga elemendi kohta, ja CSS määratleb ruudustiku ning positsioneerib iga elemendi. Kleepige mõlemad oma projekti ja saate täpselt sama paigutuse, mille siin joonistasite.

CSS Cubic Bezier generaatorLohistage kahte pidet üleminekukõvera kujundamiseks, vaadake punkti liikumist võrdluses ühtlase liikumisega ja kopeerige cubic-bezier() väärtus.Flexboxi generaatorSeadistage flex-konteiner ja selle elemendid visuaalsete juhtnuppudega, vaadake paigutuse reageerimist reaalajas ja kopeerige CSS ühe klõpsuga.Box Shadow generaatorLohistage liugureid box-shadow kujundamiseks, lisage sügavuse saavutamiseks kihte ja kopeerige valmis CSS kohe.Gradiendi generaatorLooge lineaarseid, radiaalseid või koonilisi gradiente, lisage värvipunkte ja määrake suund ning kopeerige CSS ühe klõpsuga.Border Radiuse generaatorÜmardage iga nurka liuguritega, kujundage orgaanilisi mulle elliptilise režiimiga ja kopeerige CSS kohe.CSS clamp() kalkulaatorSisestage suurus väikeste ja suurte ekraanide jaoks ning saate sujuvalt skaleeruva clamp() väärtuse fondi suuruste, paddingute, marginite või gapide jaoks.