Ġeneratur ta' CSS Grid

X'inhu l-Ġeneratur ta' CSS Grid u x'jagħmel?

Il-Ġeneratur ta' CSS Grid huwa għodda viżwali li tippermettilek tfassal tqassim (layout) ta' CSS grid b'mod faċli u mgħaġġel. Permezz ta' din l-għodda, tista' tissettja n-numru ta' kolonni u ringieli, tiddefinixxi d-daqsijiet tagħhom, u tispeċifika l-gaps (spazji) ta' bejniethom. Ladarba l-istruttura tkun lesta, tista' tiddreggja l-maws fuq il-grid biex tpoġġi l-oġġetti fi ħdan it-tqassim tiegħek. L-għodda awtomatikament tiġġenera l-kodiċi CSS u HTML korrispondenti għall-grid li tkun iddisinjajt, li mbagħad tista' tikkopja u tikkopja direttament fil-proġett tiegħek.

Din l-għodda hija ideali għal:

• Xi ħadd li jrid jagħmel prototip malajr ta' tqassim ta' CSS grid.
• Xi ħadd li għandu bżonn jiġġenera CSS u HTML għal tqassim ta' grid mingħajr ma jikteb il-kodiċi manwalment.
• Xi ħadd li jixtieq jara viżwalment kif daqsijiet differenti ta' kolonni u ringieli jaffettwaw tqassim ta' grid.
• Xi ħadd li għandu bżonn joħloq tqassim bi struttura ta' sidebar, header/footer, gallerija, jew dashboard.

Il-Konfigurazzjoni tal-Grid: Inputs u Valuri

Biex tibni l-grid tiegħek, l-għodda tipprovdi diversi għażliet ta' konfigurazzjoni li tista' tibdel skont il-bżonnijiet tiegħek:

• Kolonni: Tista' tagħżel numru ta' kolonni bejn 1 u 12.
• Ringieli (Rows): Tista' tagħżel numru ta' ringieli bejn 1 u 12.
• Spazju bejn il-kolonni: Valur f'pixels li jista' jkun bejn 0 u 48px.
• Spazju bejn ir-ringieli (Row gap): Valur f'pixels li jista' jkun bejn 0 u 48px.
• Daqsijiet tal-kolonni: Hawnhekk tista' ddaħħal kwalunkwe valur validu ta' CSS grid, bħal 1fr, 200px, auto, min-content, jew minmax(120px, 1fr).
• Daqsijiet tar-ringieli: Bl-istess mod, tista' ddaħħal kwalunkwe valur validu ta' CSS grid, bħal 1fr, 200px, auto, min-content, jew minmax(120px, 1fr).
• Tqegħid ta' oġġetti (Item placement): Dan isir billi tiddreggja l-maws fuq iċ-ċelloli biex timmarka żona rettangolari.

Regoli tal-Użu u Karatteristiċi Speċjali

Meta tuża l-Ġeneratur ta' CSS Grid, hemm xi regoli importanti u funzjonalitajiet li għandek iżżomm f'moħħok:

• Tqegħid ta' oġġetti: Meta tiddreggja fuq iċ-ċelloli u titlaq il-maws, jinħoloq oġġett wild (child item) li jkopri l-kolonni u r-ringieli magħżula. Kull oġġett li tpinġi jirċievi r-regola tiegħu stess ta' grid-column u grid-row fil-kodiċi CSS u div korrispondenti fl-HTML.
• Oġġetti fuq xulxin: L-oġġetti jistgħu jidħlu fuq xulxin (overlap). F'dan il-każ, l-oġġett li tpinġi l-aħħar se joqgħod fuq nett.
• Tneħħija ta' oġġetti: Jekk tixtieq tneħħi oġġett li tkun ħloqt, tista' sempliċement tikklikkja fuq il-buttuna "×" li tinsab fuq l-oġġett innifsu. L-għodda tappoġġja massimu ta' 16-il oġġett.
• Daqsijiet tat-tracks: Kull track (kolonna jew ringiela) għandha l-kaxxa tad-daqs tagħha fejn tista' tikteb il-valur li tixtieq. Jekk iddaħħal valur invalidu (bħal not-a-grid-track), il-qasam tal-input jiġi mmarkat bħala invalidu, iżda l-kodiċi CSS iġġenerat iżomm l-aħħar valur validu li kien hemm.
• Ottimizzazzjoni tal-kodiċi: Jekk ikun hemm tracks li jaqsmu l-istess daqs, dawn jiġu raggruppati awtomatikament bl-użu tal-funzjoni repeat() fil-kodiċi CSS finali biex il-kodiċi jibqa' qasir u nadif. Bl-istess mod, jekk l-ispazju bejn il-kolonni u l-ispazju bejn ir-ringieli jkunu l-istess, dawn jingħaqdu taħt proprjetà waħda ta' gap fis-CSS.
• Buttuni ta' azzjoni: Il-buttuna "Żid oġġett" tiġġenera oġġett HTML ġdid. Min-naħa l-oħra, l-għażla "Ikklerja l-oġġetti" tneħħi kollox, u tirriżulta f'kontenitur HTML vojt u għadd ta' 0 oġġetti.

Presets lesti għall-użu

Biex jgħinek tibda malajr, il-ġeneratur joffri diversi mudelli lesti (presets) li tista' tagħżel mill-ewwel:

• Sidebar: Struttura klassika b'kolonna tal-ġenb.
• Header u footer: Tqassim li jinkludi sezzjoni fuq nett u oħra taħt nett.
• Gallerija: Dan il-preset jiġġenera awtomatikament tqassim bi 3 kolonni, 2 ringieli, u 3 oġġetti.
• Dashboard: Struttura adattata għal pannell tal-kontroll jew dashboard.

Outputs: Il-Kodiċi Iġġenerat

L-għodda tipprovdi żewġ tipi ta' outputs li tista' tikkopja faċilment:

1. CSS: Il-kodiċi CSS iġġenerat għall-kontenitur tal-grid (grid container) u għal kull oġġett li tkun poġġejt fuq il-grid.
2. HTML: Il-kodiċi HTML iġġenerat li jinkludi l-kontenitur tal-grid u l-elementi div għal kull oġġett li tkun ħloqt.

Privatezza u Proċessar tad-Data

Is-sigurtà u l-privatezza tiegħek huma mħarsa waqt li tuża din l-għodda. Il-grid tiegħek tiġi ġġenerata u mibnija direttament fil-browser tiegħek. Xejn minn dak li tikkonfigura jew tissettja fl-għodda ma jiġi mtella' fuq is-servers tagħna.

---

Mistoqsijiet Frekwenti (FAQ)

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 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.