CSS Grid -generaattori
Rakenna CSS Grid -asetteluja visuaalisesti reaaliaikaisella esikatselulla. Aseta sarakkeet, rivit, välit ja tasaus. Kopioi CSS-koodi. Ilmainen verkkotyökalu.
Esikatselu
Viite
Mikä on CSS Grid?
CSS Grid Layout on kaksiulotteinen asettelujärjestelmä, joka mahdollistaa monimutkaisten ruudukkoasettelujen luomisen. Toisin kuin Flexbox, joka on yksiulotteinen, Grid voi käsitellä sekä sarakkeita että rivejä samanaikaisesti, mikä tekee siitä ihanteellisen sivuasetteluille.
Grid-mallit
grid-template-columns ja grid-template-rows määrittävät grid-sarakkeiden ja -rivien raitojen koot. Käytä 1fr tasaisille osuuksille, auto sisältöpohjaiselle koolle tai kiinteitä arvoja kuten 200px. Funktio repeat() yksinkertaistaa toistuvia kaavoja.
Tietosuoja
Kaikki grid-luonti tapahtuu 100 % selaimessasi. Mitään tietoja ei lähetetä palvelimelle.