CSS Grid -generaattori

Määritä sarakkeet ja rivit, vedä solujen yli sijoittaaksesi elementtejä ja kopioi grid-CSS sekä vastaava HTML yhdellä klikkauksella.

Esiasetukset
Elementit
CSS
HTML
Sijoita elementti vetämällä ruudukon yli.

Ruudukko luodaan suoraan selaimessasi. Mitään tekemiäsi asetuksia ei lähetetä BroBroGo-palveluun.

UKK

Miten sijoitan elementtejä ruudukkoon?

Paina ja vedä solujen yli merkitäksesi suorakulmion – kun päästät irti, siitä tulee sijoitettu lapsielementti, joka kattaa kyseiset sarakkeet ja rivit. Jokainen piirtämäsi elementti saa oman grid-column- ja grid-row-sääntönsä CSS-koodiin ja vastaavan div-elementin HTML-koodiin. Elementit voivat olla päällekkäisiä, jolloin myöhemmin piirretty jää päällimmäiseksi; voit poistaa elementin klikkaamalla sen ×-merkkiä.

Voivatko sarakkeet ja rivit olla erikokoisia?

Kyllä. Jokaisella uralla (track) on oma kokokenttänsä, ja voit kirjoittaa siihen minkä tahansa grid-arvon – esimerkiksi 1fr, 200px, auto, min-content tai minmax(120px, 1fr). Urataulukot, joilla on sama koko, yhdistetään repeat()-muotoon, jotta koodi pysyy lyhyenä. Sarakkeiden ja rivien välit (gap) asetetaan erikseen, ja ne yhdistetään yhdeksi gap-arvoksi, jos ne ovat samat.

Mitä teen luodulla koodilla?

Kopioi CSS ja HTML rinnakkain. HTML antaa sinulle säiliön, jossa on yksi div-elementti per ruudukon kohde, ja CSS määrittää ruudukon sekä sijoittaa kunkin kohteen. Liitä molemmat projektiisi, niin saat saman asettelun kuin piirsit täällä.

CSS Cubic Bezier -generaattoriMuotoile kevennyskäyrää vetämällä kahta kahvaa, seuraa pisteen liikettä suhteessa tasaisen nopeaan ja kopioi cubic-bezier()-arvo.Flexbox-generaattoriMääritä flex-säiliö ja sen elementit visuaalisilla ohjaimilla, seuraa asettelun muutoksia reaaliajassa ja kopioi CSS yhdellä klikkauksella.Box Shadow -generaattoriSäädä laatikon varjoa liukusäätimillä, pinoa tasoja syvyyden luomiseksi ja kopioi valmis CSS-koodi heti.Liukuväri-generaattoriLuo lineaarinen, säteittäinen tai kartiomainen liukuväri, lisää väripisteitä ja aseta suunta, ja kopioi sitten CSS yhdellä klikkauksella.Border Radius -generaattoriPyöristä kulmat liukusäätimillä, luo orgaanisia muotoja elliptisellä tilalla ja kopioi CSS-koodi heti.CSS clamp() -laskuriSyötä koko pienille ja suurille näytöille ja saat joustavan clamp()-arvon, joka skaalautuu sujuvasti niiden välillä – sopii fonttikoille, sisällyksille tai väleille.