Kaikki yleiset CSS grid -ominaisuudet ryhmiteltynä sen mukaan, mihin niitä sovelletaan: säiliöön, kohteeseen ja kokoyksiköihin. Jokainen rivi yhdistää ominaisuuden sen yleisiin arvoihin.
Grid asettelee elementit kahteen ulottuvuuteen: riveille ja sarakkeille samanaikaisesti. Aseta display: grid vanhemmalle, määritä radat grid-template-columns- ja grid-template-rows-ominaisuuksilla ja sijoita lapset soluihin. Käytä gridiä sivu- ja korttiasetteluihin; käytä flexboxia yksiulotteisille palkeille. Ne kaksi yhdistyvät vapaasti.
Viitetaulukko · 33 merkintää
CSS GridExplained
33 of 33 rows
Säiliö
grid | inline-grid
Muuttaa elementin grid-säiliöksi.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Määrittää sarakkeet ja niiden leveydet.
auto 1fr auto
Määrittää rivit ja niiden korkeudet.
[main-start] 1fr [main-end]
Nimeää gridin viivat mallissa ja sijoittaa kohteet näiden nimien mukaan.
1rem | 8px 16px
Rivi- ja sarakeväli.
"header header" "nav main"
Nimeää solut luettavaa sijoittelua varten.
"head head" 64px "nav main" 1fr / 200px 1fr
Asettaa rivit, sarakkeet ja alueet yhdellä lyhenteellä.
repeat(2, 1fr) / auto-flow 80px
Asettaa kaikki rataominaisuudet ja grid-auto-flow'n yhdellä ilmoituksella.
minmax(80px, auto)
Asettaa niiden rivien korkeuden, joita malli ei määritä.
120px | minmax(0, 1fr)
Asettaa niiden sarakkeiden leveyden, joita malli ei määritä.
row | column | row dense
Valitsee akselin sijoittelemattomille kohteille; dense täyttää aiemmat aukot.
start | center | end | stretch
Tasaa kunkin kohteen solunsa sisällä rivin akselin suunnassa.
start | center | end | stretch
Tasaa kunkin kohteen solunsa sisällä sarakkeen akselin suunnassa.
center | start end
Asettaa align-itemsin ja justify-itemsin yhdellä ilmoituksella.
start | center | space-between
Tasaa ratagridin säiliön sisällä rivin akselin suunnassa.
start | center | space-between
Tasaa ratagridin säiliön sisällä sarakkeen akselin suunnassa.
center | end start
Asettaa align-contentin ja justify-contentin yhdellä ilmoituksella.
Kohde
1 / 3 | span 2
Sijoittaa kohteen sarakkeille tai venyttää sen niiden yli.
1 / 2 | span 3
Sijoittaa kohteen riveille tai venyttää sen niiden yli.
grid-column: 2 / -1
Laskee viivat gridin lopusta; -1 on viimeinen viiva.
header | 1 / 1 / 2 / 3
Nimeää kohteen tai sijoittaa sen kokonaan yhdellä lyhenteellä.
start | center | end | stretch
Tasaa tämän yhden kohteen solunsa sisällä rivin akselin suunnassa.
start | center | end | stretch
Tasaa tämän yhden kohteen solunsa sisällä sarakkeen akselin suunnassa.
center | start end
Asettaa align-selfin ja justify-selfin yhdellä ilmoituksella.
Kokoyksiköt
1fr | 2fr
Osuus radan vapaasta tilasta.
auto | 1fr auto
Mittaa radan sen sisällön mukaan; tasaus voi venyttää sitä.
min-content | max-content
Mittaa radan sen pienimmän tai suurimman sisällön mukaan.
fit-content(180px)
Mittaa radan sisällön mukaan mutta ei koskaan annetun ylärajan yli.
minmax(200px, 1fr)
Rajoittaa radan minimi- ja maksimikoon välille.
repeat(4, 1fr)
Toistaa ratamallin kutakin erikseen kirjoittamatta.
repeat(auto-fit, minmax(120px, 1fr))
Lisää niin monta rataa kuin mahtuu; auto-fit painaa tyhjät radat kasaan.
grid-template-columns: subgrid
Saa upotetun gridin jakamaan vanhemman radat ja viivojen nimet.
grid-template-rows: masonry
Kokeellinen: pakkaa kohteet sarakkeisiin korkeuden mukaan kiinteiden rivien sijaan.