CSS Grid generatorius

Nustatykite stulpelius ir eilutes, vilkite per langelius elementams išdėstyti ir vienu spustelėjimu nukopijuokite tinklelio CSS bei atitinkamą HTML.

Išankstiniai nustatymai
Elementai
CSS
HTML
Vilkite per tinklelį, kad patalpintumėte elementą.

Jūsų tinklapis kuriamas tiesiog jūsų naršyklėje. Jokie jūsų nustatymai nėra siunčiami į „BroBroGo“.

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.

CSS Cubic Bezier generatoriusVilkite dvi rankenėles, kad suformuotumėte animacijos kreivę, stebėkite judantį tašką ir nukopijuokite cubic-bezier() reikšmę.Flexbox generatoriusKonfigūruokite flex konteinerį ir jo elementus vizualiais valdikliais, stebėkite išdėstymą gyvai ir nukopijuokite CSS vienu spustelėjimu.Elementų šešėlių (box-shadow) generatoriusVilkite šliaužiklius, kad suformuotumėte šešėlį, sluoksniuokite juos gyliui išgauti ir akimirksniu nukopijuokite paruoštą CSS.Gradientų generatoriusKurkite tiesinius, radialinius ar kūginius gradientus, pridėkite spalvų taškus, nustatykite kryptį ir nukopijuokite CSS vienu spustelėjimu.Kampų apvalinimo (border-radius) generatoriusApvalinkite kiekvieną kampą šliaužikliais, kurkite organines formas elipsiniu režimu ir akimirksniu nukopijuokite CSS.CSS clamp() skaičiuoklėĮveskite dydį mažiems ir dideliems ekranams ir gaukite kintančią clamp() reikšmę, kuri sklandžiai prisitaiko – šriftams, paraštėms ar tarpams.