Ano ang CSS Grid?
Ang CSS Grid Layout ay isang dalawang-dimensyonal na sistema ng layout na nakapaloob sa mga modernong browser. Tinutukoy mo ang isang grid container gamit ang display: grid, pagkatapos ay kontrolin ang mga kolum gamit ang grid-template-columns at mga hilera gamit ang grid-template-rows. Ang mga fractional unit (fr) ay namamahagi ng available na espasyo nang proporsyonal. Ang mga child item ay maaaring sumasaklaw sa maraming kolum o hilera gamit ang grid-column: span N at grid-row: span N.
Paano Gamitin ang CSS Grid Generator
-
Itakda ang bilang ng mga kolum at hilera gamit ang mga numerong input (1–12 bawat isa).
-
I-adjust ang grid-template-columns at grid-template-rows para kontrolin ang mga sukat (hal. 1fr 2fr, 200px auto).
-
Itakda ang agwat sa pagitan ng mga cell (hal. 10px, 1rem).
-
I-click ang anumang cell sa preview para piliin ito (magiging kulay kahel).
-
Itakda ang col-span at row-span sa panel ng Cell Span, pagkatapos i-click ang Ilapat. Ang mga naka-span na cell ay magiging berde.
-
I-click ang tab na CSS o HTML para baguhin ang format ng output, pagkatapos Kopyahin sa clipboard.
-
I-click ang I-reset Lahat para magsimula muli sa sariwang 3×3 grid.