Ang bawat karaniwang CSS grid property, nakagrupo ayon sa kung saan ito iniapply: sa container, sa item, at sa mga sizing unit. Pinapares ng bawat row ang property sa mga karaniwang value nito.
Nagla-layout ang grid ng mga element sa dalawang dimensyon: mga row at column nang sabay. I-set ang display: grid sa parent, i-define ang mga track gamit ang grid-template-columns at grid-template-rows, at ilagay ang mga anak sa mga cell. Gamitin ang grid para sa page at card layout; gamitin ang flexbox para sa one-dimensional na bar. Malayang nagkakombina ang dalawa.
Talaan ng sanggunian · 33 mga entry
CSS GridExplained
33 of 33 rows
Container
grid | inline-grid
Ginagawang grid container ang element.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Tinutukoy ang mga column at ang lapad ng mga ito.
auto 1fr auto
Tinutukoy ang mga row at ang taas ng mga ito.
[main-start] 1fr [main-end]
Pinangangalanan ang mga grid line sa isang template at inilalagay ang mga item gamit ang mga pangalang iyon.
1rem | 8px 16px
Espasyo sa pagitan ng mga row at column.
"header header" "nav main"
Pinangangalanan ang mga cell para sa nababasang placement.
"head head" 64px "nav main" 1fr / 200px 1fr
Nagtatakda ng mga row, column, at area sa iisang shorthand.
repeat(2, 1fr) / auto-flow 80px
Nagtatakda ng lahat ng track property at ng grid-auto-flow sa iisang declaration.
minmax(80px, auto)
Nagtatakda ng taas ng mga row na hindi tinutukoy ng template.
120px | minmax(0, 1fr)
Nagtatakda ng lapad ng mga column na hindi tinutukoy ng template.
row | column | row dense
Pumipili ng axis para sa mga hindi naka-place na item; pinupunan ng dense ang mga naunang butas.
start | center | end | stretch
Inia-align ang bawat item sa loob ng cell nito kasama ang row axis.
start | center | end | stretch
Inia-align ang bawat item sa loob ng cell nito kasama ang column axis.
center | start end
Nagtatakda ng align-items at justify-items sa iisang declaration.
start | center | space-between
Inia-align ang track grid sa loob ng container kasama ang row axis.
start | center | space-between
Inia-align ang track grid sa loob ng container kasama ang column axis.
center | end start
Nagtatakda ng align-content at justify-content sa iisang declaration.
Item
1 / 3 | span 2
Nagla-place o nagpa-span ng item sa mga column.
1 / 2 | span 3
Nagla-place o nagpa-span ng item sa mga row.
grid-column: 2 / -1
Nagbibilang ng mga line mula sa dulo ng grid; ang -1 ang huling line.
header | 1 / 1 / 2 / 3
Pinangangalanan o ganapong nagla-place ng item sa iisang shorthand.
start | center | end | stretch
Inia-align ang partikular na item na ito sa loob ng cell nito kasama ang row axis.
start | center | end | stretch
Inia-align ang partikular na item na ito sa loob ng cell nito kasama ang column axis.
center | start end
Nagtatakda ng align-self at justify-self sa iisang declaration.
Mga sizing unit
1fr | 2fr
Isang bahagi ng libreng espasyo sa track.
auto | 1fr auto
Sinusukat ang track ayon sa content nito; kayang i-stretch ng alignment.
min-content | max-content
Sinusukat ang track sa pinakamaliit o pinakamalaking content nito.
fit-content(180px)
Sinusukat ang track ayon sa content nito pero hindi kailanman lalampas sa ibinigay na limit.
minmax(200px, 1fr)
Binibigyang-hangganan ang track sa pagitan ng isang min at isang max.
repeat(4, 1fr)
Inuulit ang isang track pattern nang hindi isinusulat ang bawat isa.
repeat(auto-fit, minmax(120px, 1fr))
Nagdaragdag ng pinakamaraming track na kasya; sine-collapse ng auto-fit ang mga walang laman.
grid-template-columns: subgrid
Pinagbabahagi ng isang nested grid ang mga track at line name ng parent.
grid-template-rows: masonry
Eksperimento: nagpapaket ng mga item sa mga column ayon sa taas sa halip na sa mga fixed na row.