Ġeneratur ta' CSS Grid

Issettja l-kolonni u r-ringieli tiegħek, drag fuq iċ-ċelloli biex tpoġġi l-oġġetti, u kkopja s-CSS tal-grid flimkien mal-HTML korrispondenti bi klikk waħda.

Presets
Oġġetti
CSS
HTML
Drag fuq il-grid biex tpoġġi oġġett.

Il-grid tiegħek tiġi ġġenerata direttament fil-browser tiegħek. Xejn minn dak li tikkonfigura hawn ma jiġi mtella' fuq BroBroGo.

Mistoqsijiet Frekwenti

Kif inqiegħed oġġetti fuq il-grid?

Agħfas u drag fuq iċ-ċelloli biex timmarka rettangolu — meta titlaq, dan isir oġġett imqiegħed li jkopri dawk il-kolonni u ringieli. Kull oġġett li tpinġi jirċievi r-regola tiegħu stess ta' grid-column u grid-row fis-CSS u div korrispondenti fl-HTML. L-oġġetti jistgħu jidħlu fuq xulxin, u dak li tpinġi l-aħħar joqgħod fuq nett; uża l-× fuq oġġett biex tneħħih.

Il-kolonni u r-ringieli jistgħu jkunu ta' daqsijiet differenti?

Iva. Kull track għandha l-kaxxa tad-daqs tagħha stess, u tista' tikteb kwalunkwe valur tal-grid hemmhekk — 1fr, 200px, auto, min-content jew minmax(120px, 1fr). Tracks li għandhom l-istess daqs jiġu raggruppati f'repeat() sabiex il-kodiċi jibqa' qasir. L-ispazju tal-kolonni u r-ringieli jiġu ssettjati separatament, u jingħaqdu f'gap wieħed meta jkunu l-istess.

X'nagħmel bil-kodiċi ġġenerat?

Ikkopja s-CSS u l-HTML flimkien. L-HTML jagħtik il-kontenitur b'div wieħed għal kull oġġett, u s-CSS jiddefinixxi l-grid u jpoġġi kull oġġett f'postu. Paste t-tnejn li huma fil-proġett tiegħek biex tikseb l-istess tqassim li pinġejt hawn.

Ġeneratur ta' CSS Cubic BezierDrag iż-żewġ manki biex tifforma kurva ta' easing, ara tikka timxi magħha mqabbla ma' waħda b'veloċità kostanti, u kkopja l-valur cubic-bezier().Ġeneratur ta' FlexboxIkkonfigura kontenitur flex u l-oġġetti tiegħu b'kontrolli viżwali, ara t-tqassim jirreaġixxi f'ħin reali, u kkopja s-CSS bi klikk waħda.Ġeneratur ta' Box ShadowDrag is-sliders biex tifforma box-shadow, żid is-saffi għal aktar fond, u kkopja s-CSS lest istantanjament.Ġeneratur ta' GradjentiIbni gradjent lineari, radjali, jew koniku, żid waqfiet tal-kulur u ssettja d-direzzjoni, imbagħad ikkopja s-CSS bi klikk waħda.Ġeneratur ta' Border RadiusIttundja kull kantuniera bi sliders, oħloq forom organiċi bil-mod ellittiku, u kkopja s-CSS istantanjament.Kalkolatur ta' CSS clamp()Daħħal daqs għal skrins żgħar u kbar u rċievi valur fluwidu clamp() li jiskala b'mod uniformi bejniethom — għal daqsijiet ta' tipa, padding, margins jew gaps.