Generator ng CSS Grid
Gumawa ng CSS grid layouts nang biswal.
Mga preset ng layout (10)
I-drag sa mga cell para magpinta ng rectangle, o mag-click ng tig-isang cell. Dapat manatiling rectangle ang bawat pinangalanang area.
Live na preview
Isang-dimensiyon: Generator ng CSS Flexbox.
Gumawa ng CSS grid na may mga pinangalanang lugar.
Magpinta ng letter grid para sa template-areas, o pumili ng preset. Ang preview ay nagpapakita ng bawat rehiyon na may natatanging kulay.
Mga Madalas Itanong
Ano ang grid-template-areas?
Paraan ito para pangalanan ang mga bahagi ng layout (header, sidebar, main…) at ilagay ang mga item ayon sa pangalan sa halip na line number. I-click ang mga cell sa ibaba para ilagay ang mga titik ng area — live na nag-a-update ang CSS.
Maaari ba akong magsimula sa isang preset?
Oo — nilo-load ng sampung layout preset, kabilang ang Holy grail, dashboard, magazine, at app shell, ang mga named area sa isang click.
May ina-upload ba?
Hindi. Ganap na ginagawa ang CSS sa iyong browser.
Huling na-update: