CSS Grid Generator

I-set ang iyong mga column at row, i-drag sa mga cell para maglagay ng mga item, at kopyahin ang grid CSS kasama ang katugmang HTML sa isang click lang.

Mga Preset
Mga Item
CSS
HTML
I-drag sa buong grid para maglagay ng item.

Ang iyong grid ay binuo mismo sa iyong browser. Walang anuman sa mga inilalagay mo rito ang ina-upload sa BroBroGo.

FAQ

Paano ako maglalagay ng mga item sa grid?

Pindutin at i-drag sa mga cell para markahan ang isang parihaba — kapag binitawan mo ito, magiging inilagay na child ito na sumasaklaw sa mga column at row na iyon. Ang bawat item na iguguhit mo ay magkakaroon ng sarili nitong grid-column at grid-row rule sa CSS at katugmang div sa HTML. Maaaring mag-overlap ang mga item, at ang huling iginuhit ay mapupunta sa ibabaw; gamitin ang × sa item para alisin ito.

Maaari bang magkaiba ang sukat ng mga column at row?

Oo. Ang bawat track ay may sariling sukat na box, at maaari kang mag-type ng kahit anong grid value doon — 1fr, 200px, auto, min-content o minmax(120px, 1fr). Ang mga track na may parehong sukat ay pinagsasama sa repeat() para manatiling maikli ang output. Ang column gap at row gap ay itinatakda nang magkahiwalay, at nagsasama sa iisang gap kapag magkatugma ang mga ito.

Ano ang gagawin ko sa nabuong code?

Kopyahin ang CSS at ang HTML nang magkatabi. Ang HTML ay nagbibigay sa iyo ng container na may isang div bawat item, at tinutukoy ng CSS ang grid at posisyon ng bawat item. I-paste ang dalawa sa iyong proyekto at makukuha mo ang parehong layout na iginuhit mo rito.

Isinulat at sinuri ng editorial team ng BroBroGo.Huling na-update:

Gabay sa Paggamit ng CSS Grid Generator

Ang CSS Grid Generator ay isang visual na tool na nagbibigay-daan sa pagbuo ng mga grid layout sa pamamagitan ng pagtukoy sa bilang ng mga column at row, pagtatakda ng kanilang mga sukat, at paglalagay ng mga gap sa pagitan ng mga ito. Sa pamamagitan ng pag-drag sa mga cell, madaling mailalagay ang mga child item sa loob ng layout. Awtomatikong nililikha ng tool ang katugmang CSS at HTML code na handa nang kopyahin at i-paste sa iyong sariling proyekto.

Ang pagbuo ng grid ay mabilis at ligtas dahil ang iyong grid ay binuo mismo sa iyong browser. Walang anuman sa mga inilalagay mo rito ang ina-upload sa BroBroGo.

Mga Parameter at Limitasyon sa Pag-input

Upang makabuo ng tumpak na layout, gumagamit ang tool ng mga tiyak na limitasyon at patakaran sa mga input field:

  • Mga Column: Tumatanggap ng numero mula 1 hanggang 12.
  • Mga Row (Rows): Tumatanggap ng numero mula 1 hanggang 12.
  • Gap ng column: Maaaring i-set mula 0 hanggang 48px.
  • Gap ng row (Row gap): Maaaring i-set mula 0 hanggang 48px.
  • Mga sukat ng column at row: Tumatanggap ng anumang wastong halaga ng CSS grid gaya ng 1fr, 200px, auto, min-content, o minmax(120px, 1fr).
  • Paglalagay ng item (Item placement): Isinasagawa sa pamamagitan ng pag-drag sa mga cell upang markahan ang isang parihabang lugar.

Kung magpapasok ng hindi wastong halaga tulad ng not-a-grid-track sa kahon ng sukat ng track, mamarkahan bilang invalid ang input field, ngunit pananatilihin ng CSS output ang huling wastong halaga na natanggap nito. Ang tool ay sumusuporta sa maximum na 16 na mga item.

Pag-unawa sa CSS Grid at mga Unit

Ang CSS Grid Layout ay isang makapangyarihang sistema para sa pagbuo ng dalawang-dimensyong layout sa web. Dalawa sa pinakamahalagang katangian nito ay ang grid-template-columns at grid-template-rows na nagtatakda ng istruktura ng mga linya ng grid.

Ang Paggamit ng fr Unit

Ang fr unit ay kumakatawan sa isang fraction o bahagi ng natitirang espasyo sa loob ng grid container. Halimbawa, kung mayroon kang tatlong column na may sukat na 1fr 1fr 1fr, hahatiin ng grid ang kabuuang espasyo sa tatlong magkakapantay na bahagi.

Maikling Code Gamit ang repeat()

Kapag ang mga track (column o row) ay nagbabahagi ng parehong sukat, pinagsasama ng tool ang mga ito sa repeat() function sa output CSS upang mapanatiling maikli at malinis ang code. Halimbawa, ang tatlong column na may sukat na 1fr ay isusulat bilang repeat(3, 1fr).

Pamamahala sa mga Gap

Ang "Gap ng column" at "Gap ng row" ay itinatakda nang magkahiwalay sa interface. Gayunpaman, kapag magkatugma ang dalawang halagang ito, awtomatiko silang nagsasama sa iisang gap property sa huling CSS code upang makatipid sa espasyo.

Paglalagay ng mga Item at Pag-overlap

Ang paglalagay ng mga item sa grid ay ginagawa sa pamamagitan ng pag-drag sa mga cell. Kapag binitawan ang mouse, ang nalikhang child item ay sasaklaw sa mga tinukoy na column at row gamit ang mga katangiang grid-column and grid-row sa CSS.

  • Pag-overlap: Maaaring mag-overlap ang mga item sa loob ng grid. Ang item na huling iginuhit ay siyang mapupunta sa ibabaw ng iba pang naunang item.
  • Pagtanggal ng Item: Ang bawat item ay may markang "×". Ang pag-click sa "×" ay nag-aalis sa partikular na item na iyon.
  • Mga Kontrol: Ang pag-click sa "Magdagdag ng item" ay lumilikha ng isang HTML item, habang ang "I-clear ang mga item" ay nagreresulta sa isang walang laman na HTML container at nagbabalik sa bilang ng mga item sa 0.

Mga Preset ng Layout

Para sa mas mabilis na prototyping, nagbibigay ang tool ng apat na pre-configured na layout sa ilalim ng "Mga Preset":

  1. Sidebar: Isang karaniwang layout na may nakalaang espasyo para sa nabigasyon sa gilid.
  2. Header at footer: Layout na may nakapirming header sa itaas at footer sa ibaba.
  3. Gallery: Isang preset na awtomatikong bumubuo ng 3 columns, 2 rows, at 3 items.
  4. Dashboard: Isang kumplikadong istruktura na angkop para sa mga admin panel at control center.

Mga Madalas Itanong (FAQ)

Paano ako maglalagay ng mga item sa grid?
Pindutin at i-drag sa mga cell para markahan ang isang parihaba — kapag binitawan mo ito, magiging inilagay na child ito na sumasaklaw sa mga column at row na iyon. Ang bawat item na iguguhit mo ay magkakaroon ng sarili nitong grid-column at grid-row rule sa CSS at katugmang div sa HTML. Maaaring mag-overlap ang mga item, at ang huling iginuhit ay mapupunta sa ibabaw; gamitin ang × sa item para alisin ito.

Maaari bang magkaiba ang sukat ng mga column at row?
Oo. Ang bawat track ay may sariling sukat na box, at maaari kang mag-type ng kahit anong grid value doon — 1fr, 200px, auto, min-content o minmax(120px, 1fr). Ang mga track na may parehong sukat ay pinagsasama sa repeat() para manatiling maikli ang output. Ang column gap at row gap ay itinatakda nang magkahiwalay, at nagsasama sa iisang gap kapag magkatugma ang mga ito.

Ano ang gagawin ko sa nabuong code?
Kopyahin ang CSS at ang HTML nang magkatabi. Ang HTML ay nagbibigay sa iyo ng container na may isang div bawat item, at tinutukoy ng CSS ang grid at posisyon ng bawat item. I-paste ang dalawa sa iyong proyekto at makukuha mo ang parehong layout na iginuhit mo rito.

Ligtas ba ang aking data habang ginagamit ang tool na ito?
Oo. Ang iyong grid ay binuo mismo sa iyong browser. Walang anuman sa mga inilalagay mo rito ang ina-upload sa BroBroGo, kaya nananatiling pribado ang iyong ginagawang layout.

CSS Cubic Bezier GeneratorI-drag ang dalawang handle para hubugin ang easing curve, panoorin ang paggalaw ng dot kumpara sa steady na dot, at kopyahin ang cubic-bezier() value.Flexbox GeneratorMag-set up ng flex container at ng mga item nito gamit ang mga visual na kontrol, panoorin ang reaksyon ng layout nang live, at kopyahin ang CSS sa isang click lang.Box Shadow GeneratorI-drag ang mga slider para humubog ng box-shadow, magpatong ng mga layer para sa lalim, at kopyahin ang natapos na CSS agad-agad.Gradient GeneratorBumuo ng linear, radial, o conic na gradient, magdagdag ng mga color stop at i-set ang direksyon, pagkatapos ay kopyahin ang CSS sa isang click lang.Border Radius GeneratorBilugin ang bawat sulok gamit ang mga slider, humubog ng mga organic blob gamit ang elliptical mode, at kopyahin ang CSS agad-agad.CSS clamp() CalculatorMaglagay ng sukat para sa maliliit at malalaking screen at kumuha ng fluid na clamp() value na maayos na nag-i-scale sa pagitan — para sa mga sukat ng font, padding, margin o gap.