Toate proprietățile comune CSS grid, grupate după locul de aplicare: containerul, elementul și unitățile de dimensionare. Fiecare rând asociază proprietatea cu valorile ei comune.
Grid așază elementele pe două dimensiuni: rânduri și coloane simultan. Setează display: grid pe părinte, definește piste cu grid-template-columns și grid-template-rows și plasează copiii în celule. Folosește grid pentru layouturi de pagini și de carduri; folosește flexbox pentru bare unidimensionale. Cele două se combină liber.
Tabel de referință · 33 intrări
CSS GridExplained
33 of 33 rows
Container
grid | inline-grid
Transformă elementul într-un container grid.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Definește coloanele și lățimile lor.
auto 1fr auto
Definește rândurile și înălțimile lor.
[main-start] 1fr [main-end]
Dă nume liniilor grilei într-un șablon și plasează elementele după aceste nume.
1rem | 8px 16px
Spațiu între rânduri și coloane.
"header header" "nav main"
Dă nume celulelor pentru o plasare lizibilă.
"head head" 64px "nav main" 1fr / 200px 1fr
Setează rândurile, coloanele și zonele într-o singură prescurtare.
repeat(2, 1fr) / auto-flow 80px
Setează toate proprietățile pistelor și grid-auto-flow într-o singură declarație.
minmax(80px, auto)
Setează înălțimea rândurilor pe care șablonul nu le definește.
120px | minmax(0, 1fr)
Setează lățimea coloanelor pe care șablonul nu le definește.
row | column | row dense
Alege axa pentru elementele neplasate; dense umple golurile anterioare.
start | center | end | stretch
Aliniază fiecare element în celula lui de-a lungul axei rândurilor.
start | center | end | stretch
Aliniază fiecare element în celula lui de-a lungul axei coloanelor.
center | start end
Setează align-items și justify-items într-o singură declarație.
start | center | space-between
Aliniază grila pistelor în interiorul containerului de-a lungul axei rândurilor.
start | center | space-between
Aliniază grila pistelor în interiorul containerului de-a lungul axei coloanelor.
center | end start
Setează align-content și justify-content într-o singură declarație.
Element
1 / 3 | span 2
Plasează un element pe coloane sau îl întinde peste mai multe.
1 / 2 | span 3
Plasează un element pe rânduri sau îl întinde peste mai multe.
grid-column: 2 / -1
Numără liniile de la sfârșitul grilei; -1 este ultima linie.
header | 1 / 1 / 2 / 3
Dă un nume sau plasează complet un element într-o singură prescurtare.
start | center | end | stretch
Aliniază doar acest element în celula lui de-a lungul axei rândurilor.
start | center | end | stretch
Aliniază doar acest element în celula lui de-a lungul axei coloanelor.
center | start end
Setează align-self și justify-self într-o singură declarație.
Unități de dimensionare
1fr | 2fr
O fracțiune din spațiul liber de pe pistă.
auto | 1fr auto
Dimensionează o pistă după conținut; alinierea o poate întinde.
min-content | max-content
Dimensionează o pistă după cel mai mic sau cel mai mare conținut.
fit-content(180px)
Dimensionează o pistă după conținut, dar niciodată peste plafonul dat.
minmax(200px, 1fr)
Limitează o pistă între un minim și un maxim.
repeat(4, 1fr)
Repetă un tipar de piste fără a scrie fiecare în parte.
repeat(auto-fit, minmax(120px, 1fr))
Adaugă câte piste încap; auto-fit prăbușește pistele goale.
grid-template-columns: subgrid
Face ca o grilă imbricată să partajeze pistele și numele de linii ale părintelui.
grid-template-rows: masonry
Experimental: împachetează elementele în coloane după înălțime în loc de rânduri fixe.