CSS Grid Builder
Itakda ang bilang ng pantay na column at row at ang pagitan ng mga ito. I-preview ang layout bago kopyahin ang CSS.
CSS Grid builder
Live na grid preview
Palitan ang mga grid value para i-update ang preview at CSS.
Paano gamitin
Paano gamitin
- Itakda ang 1–12 column at row at 0–64 pixel na gap.
- Suriin ang live grid preview.
- Kopyahin ang nabuong CSS sa stylesheet.
Live preview ng karaniwang layout
Agad nagbabago ang preview kapag iniba ang bilang ng column, row, o pixel gap. May numerong cell sa bawat row-column na posisyon.
Copyable CSS na may malinaw na limitasyon
Gumagamit ang output ng pantay na minmax(0, 1fr) na column at row na may minimum na 64 px. Hindi ine-edit ng builder na ito ang named grid area, hindi pantay na track, breakpoint, o puwesto ng bawat item.
Ginagawa sa browser
Lokal na ginagawa sa page na ito ang preview at CSS. Walang ipinapadala sa server.
Mga madalas itanong
Maaari mo ring alamin
Maaari bang magkaiba ang lapad ng bawat column?
Hindi. Pantay na fractional width ang lahat ng column. I-edit ang nabuong CSS kung kailangan mo ng ibang sukat.
Maaari bang pangalanan ang grid area?
Hindi. Pantay na row, column, at gap lang ang itinatakda ng bersyong ito.
Anong unit ang gamit ng gap?
Integer na CSS pixel mula 0 hanggang 64.