CSS Grid generatorius

Vizualus CSS tinklelio kūrimas su „CSS Grid generatoriumi“

„CSS Grid generatorius“ yra interaktyvus įrankis, leidžiantis vizualiai projektuoti CSS tinklelio išdėstymą tiesiogiai jūsų naršyklėje. Naudodamiesi šiuo įrankiu, galite lengvai nustatyti stulpelių bei eilučių skaičių, apibrėžti jų dydžius ir nurodyti tarpus tarp jų. Vilkdami pelę per tinklelio langelius, galite patogiai išdėstyti elementus norimose vietose. Įrankis automatiškai sugeneruoja atitinkamą CSS ir HTML kodą, kurį galite nukopijuoti ir iškart pritaikyti savo projekte.

Šis įrankis idealiai tinka tiems, kurie nori greitai sukurti CSS tinklelio išdėstymo prototipą arba sugeneruoti reikiamą kodą nenaudodami rankinio rašymo. Taip pat tai puiki priemonė vizualizuoti, kaip skirtingi stulpelių ir eilučių dydžiai veikia bendrą tinklelio struktūrą, bei kurti populiarius išdėstymus, tokius kaip šoninės juostos, antraštės ir porštės, galerijos ar valdymo skydo struktūros.

Įrankio parametrai ir įvesties reikšmės

Norėdami suprojektuoti savo tinklelį, galite keisti šiuos nustatymus:

• Stulpeliai: Galite nurodyti skaičių nuo 1 iki 12.
• Eilutės: Galite nurodyti skaičių nuo 1 iki 12.
• Tarpas tarp stulpelių: Pasirenkamas dydis nuo 0 iki 48px.
• Tarpas tarp eilučių: Pasirenkamas dydis nuo 0 iki 48px.
• Stulpelių dydžiai: Įveskite bet kokią galiojančią CSS tinklelio reikšmę, pavyzdžiui, 1fr, 200px, auto, min-content arba minmax(120px, 1fr).
• Eilučių dydžiai: Taip pat palaiko bet kokią galiojančią CSS tinklelio reikšmę, pavyzdžiui, 1fr, 200px, auto, min-content arba minmax(120px, 1fr).
• Elementų išdėstymas: Atliekamas vilkant pelę per langelius ir taip pažymint stačiakampį plotą.

Kiekviena juosta (stulpelis arba eilutė) turi savo dydžio laukelį, kuriame galite įrašyti norimą reikšmę. Jei įvesties laukelyje nurodysite negaliojančią reikšmę (pavyzdžiui, not-a-grid-track), laukelis bus pažymėtas kaip neteisingas, tačiau sugeneruotame CSS kode bus išlaikyta paskutinė galiojanti reikšmė.

Sugeneruotas kodas ir išvestis

Sukurto tinklelio pagrindu įrankis realiuoju laiku generuoja du pagrindinius blokus:

1. CSS: Sugeneruojamas CSS kodas, skirtas tinklelio konteineriui (grid container) ir kiekvienam patalpintam elementui.
2. HTML: Sugeneruojamas HTML kodas, kurį sudaro tinklelio konteineris ir atskiri div elementai kiekvienam jūsų išdėstytam elementui.

Jei spustelėsite mygtuką „Išvalyti elementus“, visi sukurti elementai bus pašalinti – HTML konteineris taps tuščias, o elementų skaičius bus lygus 0. Naudojant funkciją „Pridėti elementą“, sugeneruojamas naujas HTML elementas. Įrankis palaiko ne daugiau kaip 16 elementų.

Tinklelio elgsena ir elementų išdėstymo taisyklės

Vilkdami pelę per tinklelio langelius ir atleisdami pelės mygtuką, sukuriate vaikinį elementą, kuris apima jūsų pasirinktus stulpelius ir eilutes. Kiekvienas sukurtas elementas gauna unikalią grid-column ir grid-row taisyklę sugeneruotame CSS kode bei atitinkamą div žymą HTML kode.

Elementai tinklelyje gali persidengti. Jei elementai persidengia, tas, kuris buvo nupieštas vėliau, bus atvaizduojamas viršuje. Jei norite pašalinti konkretų elementą, tiesiog spustelėkite ant jo esantį „ד ženklą.

Siekdamas sugeneruoti kuo švaresnį kodą, generatorius taiko šias taisykles:

• Jei kelios juostos (stulpeliai ar eilutės) dalijasi tuo pačiu dydžiu, sugeneruotame CSS kode jos sujungiamos naudojant repeat() funkciją.
• Nors tarpas tarp stulpelių ir tarpas tarp eilučių nustatomi atskirai, jiems sutapus sugeneruotame CSS kode jie sujungiami į vieną bendrą gap savybę.

Greiti išankstiniai nustatymai

Jei norite greitai pradėti darbą su standartinėmis struktūromis, įrankis siūlo kelis išankstinius nustatymus (presets):

• Šoninė juosta: Greitas išdėstymas su šoniniu meniu.
• Antraštė ir porštė: Klasikinis tinklalapio struktūros šablonas.
• Galerija: Šis nustatymas automatiškai sugeneruoja 3 stulpelius, 2 eilutes ir 3 elementus.
• Valdymo skydas: Informacinių skydelių struktūra.

Privatumas ir duomenų apdorojimas

Naudojantis šiuo įrankiu, jūsų privatumas yra visiškai saugomas. Jūsų kuriamas tinklapis ir visi nustatymai yra apdorojami bei kuriami tiesiog jūsų naršyklėje. Jokie jūsų įvesti duomenys ar nustatymai nėra siunčiami į „BroBroGo“ serverius.

Dažniausiai užduodami klausimai (DUK)

Kaip išdėstyti elementus tinklelyje?

Paspauskite ir vilkite per langelius, kad pažymėtumėte stačiakampį – jį atleidus, jis tampa patalpintu vaikininiu elementu, apimančiu tuos stulpelius ir eilutes. Kiekvienas jūsų nupieštas elementas gauna savo „grid-column“ ir „grid-row“ taisykles CSS kode bei atitinkamą „div“ HTML kode. Elementai gali persidengti, o vėliau nupieštas elementas bus viršuje; norėdami pašalinti elementą, naudokite × ženklą.

Ar stulpeliai ir eilutės gali būti skirtingų dydžių?

Taip. Kiekviena juosta (track) turi savo dydžio laukelį, kuriame galite įvesti bet kokią tinklelio reikšmę: 1fr, 200px, auto, min-content arba minmax(120px, 1fr). Juostos, kurios dalijasi tuo pačiu dydžiu, sujungiamos į „repeat()“ funkciją, kad kodas būtų trumpesnis. Tarpas tarp stulpelių ir tarp eilučių nustatomi atskirai, o jiems sutapus sujungiami į vieną bendrą tarpą.

Ką daryti su sugeneruotu kodu?

Nukopijuokite CSS ir HTML kodus. HTML pateikia konteinerį su vienu „div“ kiekvienam elementui, o CSS apibrėžia tinklelį ir pozicionuoja kiekvieną elementą. Įklijuokite abu į savo projektą ir gausite tokį patį išdėstymą, kokį nupiešėte čia.