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ä.

Kirjoittanut ja tarkistanut BroBroGo-toimitustiimi.Päivitetty viimeksi:

Mikä on CSS Grid -generaattori?

CSS Grid -generaattori on työkalu, jonka avulla voit suunnitella visuaalisesti CSS-ruudukkoasettelun. Työkalussa voit määrittää sarakkeiden ja rivien määrän, asettaa niiden koot sekä määrittää niiden väliset raot. Voit sijoittaa elementtejä asetteluun vetämällä hiirellä ruudukon solujen yli. Työkalu luo automaattisesti suunnittelemaasi ruudukkoa vastaavan CSS- ja HTML-koodin, jonka voit kopioida ja liittää suoraan omaan projektiisi.

Tämä työkalu on hyödyllinen silloin, kun haluat luoda nopeasti prototyypin CSS-ruudukkoasettelusta tai kun tarvitset valmista CSS- ja HTML-koodia ruudukkoasettelua varten kirjoittamatta sitä käsin. Se auttaa myös hahmottamaan visuaalisesti, miten sarakkeiden ja rivien eri koot vaikuttavat ruudukon asetteluun, sekä luomaan rakenteita, kuten sivupalkkeja, ylä- ja alatunnisteita, gallerioita tai hallintapaneeleita.

Ruudukon määrittäminen ja syötteet

Ruudukon perusrakenteen luominen tapahtuu määrittämällä sarakkeet, rivit ja niiden välit seuraavien syötteiden avulla:

  • Sarakkeet: Voit määrittää sarakkeiden määräksi luvun väliltä 1–12.
  • Rivit: Voit määrittää rivien määräksi luvun väliltä 1–12.
  • Sarakkeiden väli: Välin koko voi olla luku väliltä 0–48px.
  • Rivien väli: Välin koko voi olla luku väliltä 0–48px.
  • Sarakkeiden koot: Voit syöttää minkä tahansa kelvollisen CSS-ruudukon arvon, kuten 1fr, 200px, auto, min-content tai minmax(120px, 1fr).
  • Rivien koot: Voit syöttää minkä tahansa kelvollisen CSS-ruudukon arvon, kuten 1fr, 200px, auto, min-content tai minmax(120px, 1fr).

Jokaisella uralla (sarakkeella tai rivillä) on oma kokokenttänsä, johon voit kirjoittaa haluamasi ruudukkoarvon. Jos syötät uran kooksi virheellisen arvon, kuten not-a-grid-track, kyseinen syötekenttä merkitään virheelliseksi, mutta luodussa CSS-koodissa säilytetään viimeisin kelvollinen arvo.

Elementtien sijoittaminen ruudukkoon

Elementtien sijoittaminen ruudukkoon tapahtuu vetämällä hiirellä solujen yli, jolloin merkitään haluttu suorakulmion muotoinen alue. Kun vapautat hiiren painikkeen, valitulle alueelle luodaan sijoitettu lapsielementti, joka kattaa valitut sarakkeet ja rivit.

Elementtien sijoittelussa noudatetaan seuraavia sääntöjä:

  • Jokainen piirretty elementti saa oman grid-column- ja grid-row-sääntönsä CSS-koodiin sekä vastaavan div-elementin HTML-koodiin.
  • Elementit voivat olla päällekkäisiä, jolloin myöhemmin piirretty elementti asettuu aikaisemmin piirretyn päälle.
  • Voit poistaa yksittäisen elementin klikkaamalla sen kohdalla olevaa "×"-merkkiä.
  • Työkalu tukee enintään 16 elementtiä kerrallaan.
  • Toiminto "Lisää elementti" luo HTML-elementin.
  • Toiminto "Tyhjennä elementit" tyhjentää HTML-säiliön ja nollaa elementtien määräksi 0.

Valmiit asettelujen esiasetukset

Työkalu tarjoaa valmiita esiasetuksia (presets), joiden avulla voit luoda yleisiä asettelurakenteita yhdellä klikkauksella. Käytettävissä ovat seuraavat esiasetukset:

  • Sivupalkki
  • Ylätunniste & alatunniste
  • Galleria: Tämä esiasetus luo automaattisesti 3 saraketta, 2 riviä ja 3 elementtiä.
  • Hallintapaneeli

Luodun koodin vienti ja optimointi

Kun suunnittelet ruudukkoa, työkalu luo automaattisesti koodin, jonka voit kopioida talteen:

  • CSS: Generoi CSS-koodin ruudukon säiliölle (grid container) sekä jokaiselle sijoitetulle elementille.
  • HTML: Generoi HTML-koodin ruudukon säiliölle ja luo div-elementit jokaiselle sijoitetulle elementille.

Työkalu optimoi luotavaa CSS-koodia automaattisesti tietyissä tilanteissa. Jos useammalla peräkkäisellä uralla (sarakkeella tai rivillä) on täsmälleen sama koko, ne yhdistetään CSS-koodissa tiiviimpään repeat()-muotoon. Lisäksi, vaikka sarakkeiden väli ja rivien väli määritetään itsenäisesti, ne yhdistetään CSS-koodissa yhdeksi gap-ominaisuudeksi silloin, kun niiden arvot ovat samat.

Tietosuoja ja tietojen käsittely

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

Usein kysytyt kysymykset

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.