Gjenerator i CSS Grid

Vendosni kolonat dhe rreshtat tuaj, tërhiqni përgjatë qelizave për të vendosur elemente dhe kopjoni CSS-në e rrjetës me HTML-në përkatëse me një klikim.

Parazgjedhjet
Elementet
CSS
HTML
Tërhiqni përgjatë rrjetës për të vendosur një element.

Rrjeta juaj ndërtohet drejtpërdrejt në shfletuesin tuaj. Asgjë që vendosni këtu nuk ngarkohet në BroBroGo.

Pyetje të shpeshta

Si t'i vendos elementet në rrjetë (grid)?

Shtypni dhe tërhiqni përgjatë qelizave për të shënuar një drejtkëndësh — kur ta lëshoni, ai bëhet një element fëmijë i vendosur që shtrihet në ato kolona dhe rreshta. Çdo element që vizatoni merr rregullin e vet grid-column dhe grid-row në CSS dhe një div përkatës në HTML. Elementet mund të mbivendosen, dhe ai që vizatohet më vonë qëndron sipër; përdorni × mbi një element për ta hequr atë.

A mund të kenë kolonat dhe rreshtat madhësi të ndryshme?

Po. Çdo rrugë (track) ka kutinë e vet të madhësisë dhe mund të shkruani çdo vlerë rrjete atje — 1fr, 200px, auto, min-content ose minmax(120px, 1fr). Rrugët që ndajnë të njëjtën madhësi palosen në repeat() në mënyrë që rezultati të mbetet i shkurtër. Hapësira e kolonave (column gap) dhe hapësira e rreshtave (row gap) vendosen veçmas dhe palosen në një gap të vetëm kur përputhen.

Çfarë duhet të bëj me kodin e gjeneruar?

Kopjoni CSS-në dhe HTML-në krah për krah. HTML-ja ju jep kontejnerin me një div për çdo element, dhe CSS-ja përcakton rrjetën dhe pozicionon çdo element. Vendosini të dyja në projektin tuaj dhe do të merrni të njëjtën strukturë që vizatuat këtu.