CSS Grid rafall

Skipulag á CSS Grid með sjónrænum hætti

CSS Grid rafall er tól sem gerir hönnuðum og forriturum kleift að hanna CSS grid-útlit á sjónrænan hátt. Með því að stilla fjölda dálka og raða, skilgreina stærðir þeirra og ákveða bilin á milli þeirra, má teikna upp flókin útlit beint í vafranum. Tólið býr sjálfkrafa til samsvarandi CSS- og HTML-kóða sem hægt er að afrita og líma beint inn í eigin verkefni.

Þetta tól nýtist þeim sem vilja smíða frumgerðir af netútliti fljótt, sjá hvernig mismunandi stærðir dálka og raða hafa áhrif á heildarútlitið, eða búa til algeng skipulagsmynstur eins og hliðarstikur, hausa, fótasvæði eða stjórnborð án þess að skrifa allan kóðann handvirkt.

Stillingar og takmarkanir í viðmóti

Tólið styður ákveðin gildi og reglur til að tryggja að kóðinn sem verður til sé réttur og fylgi stöðlum:

• Dálkar: Heiltala á bilinu frá 1 upp í 12.
• Raðir Raðir: Heiltala á bilinu frá 1 upp í 12.
• Bil á milli dálka: Gildi á bilinu frá 0 upp í 48px.
• Bil á milli raða Bil á milli raða: Gildi á bilinu frá 0 upp í 48px.
• Stærðir dálka og raða: Hægt er að slá inn hvaða gildu CSS-gildi sem er, til dæmis 1fr, 200px, auto, min-content eða minmax(120px, 1fr).
• Hámarksfjöldi eininga: Tólið styður að hámarki 16 einingar í einu.

Ef slegið er inn ógilt gildi í stærðarreit, eins og til dæmis not-a-grid-track, verður innsláttarreiturinn merktur sem ógildur í viðmótinu. CSS-úttakið heldur þó áfram að sýna síðasta gilda gildið sem var slegið inn.

Virkni og meðhöndlun eininga

Þegar dregið er yfir reitina í viðmótinu og músinni sleppt, verður til staðsett undireining sem nær yfir þá dálka og raðir sem dregið var yfir. Hver eining sem er teiknuð fær sína eigin grid-column og grid-row reglu í CSS-kóðanum og samsvarandi div í HTML-kóðanum.

Einingar geta skarast á netinu. Sú eining sem er teiknuð síðar mun liggja ofan á þeirri sem var teiknuð á undan. Ef smellt er á "×" á einhverri einingu er hún fjarlægð úr skipulaginu.

Viðmótið býður einnig upp á hnappa til að stýra einingum handvirkt:

• Bæta við einingu: Býr til nýja HTML-einingu í gáminum.
• Hreinsa einingar: Eyðir öllum teiknuðum einingum, sem skilar tómum HTML-gámi og telur 0 einingar.

CSS-samþjöppun og fínstillingar

Kóðinn sem tólið skilar er fínstilltur til að vera eins stuttur og auðlesinn og mögulegt er:

1. Notkun á repeat(): Ef margar rásir (dálkar eða raðir) deila nákvæmlega sömu stærð, dregur tólið þær saman í repeat() reglu í úttaks-CSS-kóðanum.
2. Sameining á bilum: Bil á milli dálka og bil á milli raða eru stillt sjálfstætt í viðmótinu. Ef þessi tvö gildi eru jöfn, sameinar tólið þau í eina gap eiginleika-reglu í CSS-kóðanum í stað þess að skrifa column-gap og row-gap í sitthvoru lagi.

Forstillingar fyrir algeng útlit

Tólið inniheldur fjórar tilbúnar forstillingar (presets) sem flýta fyrir uppsetningu á algengum vefhönnunarmynstrum:

• Hliðarstika: Skipulag með hliðarstiku og aðalefnissvæði.
• Haus & fótur: Þriggja hluta skipulag með efsta borða, miðjusvæði og neðsta borða.
• Myndasafn: Þessi forstilling býr sjálfkrafa til 3 dálka, 2 raðir og 3 staðsettar einingar.
• Stjórnborð: Flóknara net sem hentar vel fyrir stjórnborð með mörgum upplýsingareitum.

Öryggi og vinnsla gagna

Netið þitt er byggt beint í vafranum þínum. Engu af því sem þú stillir hér er hlaðið upp á BroBroGo. Öll vinnsla á hönnuninni og útreikningar á CSS- og HTML-kóða eiga sér stað staðvært á tölvunni þinni eða tæki.

---

Algengar spurningar

Hvernig staðset ég einingar á netinu?

Smelltu og dragðu yfir reitina til að afmarka rétthyrning — þegar þú sleppir verður það að staðsettri undireiningu sem nær yfir þá dálka og raðir. Hver eining sem þú teiknar fær sína eigin grid-column og grid-row reglu í CSS-kóðanum og samsvarandi div í HTML-kóðanum. Einingar mega skarast og sú sem er teiknuð síðar liggur ofan á; notaðu × á einingu til að fjarlægja hana.

Geta dálkar og raðir verið af mismunandi stærðum?

Já. Hver rás (track) hefur sinn eigin stærðarreit og þú getur slakað inn hvaða grid-gildi sem er þar — 1fr, 200px, auto, min-content eða minmax(120px, 1fr). Rásir sem deila sömu stærð eru dregnar saman í repeat() svo úttakið haldist stutt. Bil á milli dálka og raða eru stillt sérstaklega og sameinast í eitt gap þegar þau eru eins.

Hvað geri ég við kóðann sem verður til?

Afritaðu CSS- og HTML-kóðann hlið við hlið. HTML-kóðinn gefur þér gáminn með einu div fyrir hverja einingu, og CSS-kóðinn skilgreinir netið og staðsetur hverja einingu. Límdu bæði inn í verkefnið þitt og þú færð nákvæmlega sama útlit og þú teiknaðir hér.