Minden gyakori CSS grid tulajdonság, csoportosítva aszerint, hogy hol érvényes: a konténer, az elem és a méretezési egységek. Minden sor a tulajdonságot párosítja a gyakori értékeivel.
A Grid két dimenzióban rendezi el az elemeket: sorokban és oszlopokban egyszerre. Állítsd be a display: grid értéket a szülőn, definiáld a sávokat a grid-template-columns és grid-template-rows tulajdonságokkal, és helyezd a gyerekeket a cellákba. Oldal- és kártyaelrendezéshez használj gridet, egydimenziós sávokhoz flexboxot. A kettő szabadon kombinálható.
Referenciatáblázat · 33 bejegyzés
CSS GridExplained
33 of 33 rows
Konténer
grid | inline-grid
Az elemet grid konténerré alakítja.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Meghatározza az oszlopokat és azok szélességét.
auto 1fr auto
Meghatározza a sorokat és azok magasságát.
[main-start] 1fr [main-end]
Elnevezi a grid vonalakat egy sablonban, és a nevekre hivatkozva helyezi el az elemeket.
1rem | 8px 16px
Hely a sorok és az oszlopok között.
"header header" "nav main"
Elnevezi a cellákat az olvashatóbb elhelyezés érdekében.
"head head" 64px "nav main" 1fr / 200px 1fr
A sorokat, oszlopokat és területeket egyetlen rövidítésben állítja be.
repeat(2, 1fr) / auto-flow 80px
Minden sávtulajdonságot és a grid-auto-flow értéket egyetlen deklarációban állít be.
minmax(80px, auto)
Beállítja a sablonban nem definiált sorok magasságát.
120px | minmax(0, 1fr)
Beállítja a sablonban nem definiált oszlopok szélességét.
row | column | row dense
Kiválasztja a tengelyt a nem elhelyezett elemekhez; a dense visszaönti a korábbi réseket.
start | center | end | stretch
Minden elemet a celláján belül a sortengely mentén igazít.
start | center | end | stretch
Minden elemet a celláján belül az oszloptengely mentén igazít.
center | start end
Az align-items és justify-items értéket egyetlen deklarációban állítja be.
start | center | space-between
A sávokból álló gridet a konténeren belül a sortengely mentén igazítja.
start | center | space-between
A sávokból álló gridet a konténeren belül az oszloptengely mentén igazítja.
center | end start
Az align-content és justify-content értéket egyetlen deklarációban állítja be.
Elem
1 / 3 | span 2
Elhelyezi vagy átnyújtja az elemet az oszlopokon.
1 / 2 | span 3
Elhelyezi vagy átnyújtja az elemet a sorokon.
grid-column: 2 / -1
A grid vége felől számolja a vonalakat; a -1 az utolsó vonal.
header | 1 / 1 / 2 / 3
Elnevez vagy teljesen elhelyez egy elemet egyetlen rövidítésben.
start | center | end | stretch
Ezt az egy elemet a celláján belül a sortengely mentén igazítja.
start | center | end | stretch
Ezt az egy elemet a celláján belül az oszloptengely mentén igazítja.
center | start end
Az align-self és justify-self értéket egyetlen deklarációban állítja be.
Méretezési egységek
1fr | 2fr
A sávban lévő szabad terület egy tört része.
auto | 1fr auto
A sávot a tartalma szerint méretezi; az igazítás nyújthatja.
min-content | max-content
A sávot a legkisebb vagy a legnagyobb tartalmára méretezi.
fit-content(180px)
A sávot a tartalma szerint méretezi, de soha nem a megadott határ fölé.
minmax(200px, 1fr)
Egy sávot egy minimum és egy maximum közé szorít.
repeat(4, 1fr)
Ismétel egy sávmintát, mindegyiket kézzel beírás nélkül.
repeat(auto-fit, minmax(120px, 1fr))
Anyi sávot ad hozzá, amennyi belefér; az auto-fit összecsukja az üres sávokat.
grid-template-columns: subgrid
A beágyazott grid osztozik a szülő sávjain és vonalnevein.
grid-template-rows: masonry
Kísérleti: az elemeket magasság szerint csomagolja az oszlopokba, fix sorok helyett.