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.

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.