Jenereta ya CSS Grid

Weka safuwima na safu mlalo zako, buruta kwenye seli ili kuweka vipengele, na unakili CSS ya gridi pamoja na HTML inayolingana kwa mbofyo mmoja.

Vipimo vya Awali
Vipengele
CSS
HTML
Buruta kwenye gridi ili kuweka kipengele.

Gridi yako inaundwa moja kwa moja kwenye kivinjari chako. Hakuna unachoingiza hapa kinachopakiwa kwenye BroBroGo.

Maswali Yanayoulizwa Sana

Je, ninawekaje vipengele kwenye gridi?

Bonyeza na uburute kwenye seli ili kuashiria mstatili — unapoachia inakuwa kipengele kilichowekwa kinachochukua safuwima na safu mlalo hizo. Kila kipengele unachochora kinapata sheria yake ya grid-column na grid-row kwenye CSS na div inayolingana kwenye HTML. Vipengele vinaweza kuingiliana, na kile kilichochorwa baadaye kinakaa juu; tumia × kwenye kipengele ili kukiondoa.

Je, safuwima na safu mlalo zinaweza kuwa na saizi tofauti?

Ndiyo. Kila njia (track) ina kisanduku chake cha saizi, na unaweza kuandika thamani yoyote ya gridi hapo — 1fr, 200px, auto, min-content au minmax(120px, 1fr). Njia zinazoshiriki saizi sawa zinakusanywa kwenye repeat() ili matokeo yabaki mafupi. Nafasi ya safuwima na safu mlalo zinawekwa kivyake, na kuungana kuwa nafasi moja zinapolingana.

Nifanye nini na msimbo uliotengenezwa?

Nakili CSS na HTML kando kwa kando. HTML inakupa chombo chenye div moja kwa kila kipengele, na CSS inafafanua gridi na kuweka nafasi ya kila kipengele. Bandika zote mbili kwenye mradi wako na utapata mpangilio ule ule uliouchora hapa.

Imeandikwa na kukaguliwa na timu ya wahariri wa BroBroGo.Ilisasishwa mwisho:

Jenereta ya CSS Grid ni zana ya kuonekana inayorahisisha uundaji wa mipangilio ya gridi kwa kutoa msimbo wa CSS na HTML. Zana hii inakuwezesha kufafanua idadi ya safuwima na safu mlalo, kuweka saizi zake, kubainisha nafasi zilizo kati yake, na kupanga vipengele kwa kuburuta panya kwenye seli za gridi.

Jinsi ya Kutumia Jenereta ya CSS Grid

Zana hii inafanya kazi kwa kuchukua vigezo unavyoingiza na kuvitafsiri kuwa msimbo safi wa CSS na HTML. Gridi yako inaundwa moja kwa moja kwenye kivinjari chako. Hakuna unachoingiza hapa kinachopakiwa kwenye BroBroGo.

Ili kuanza, weka idadi ya safuwima na safu mlalo unazohitaji. Zana inaruhusu kiwango cha chini cha safuwima 1 na safu mlalo 1, hadi kiwango cha juu cha safuwima 12 na safu mlalo 12. Baada ya hapo, unaweza kurekebisha nafasi kati ya seli (gaps) na saizi za kila njia (track).

Ili kuweka vipengele kwenye gridi, bonyeza na uburute kwenye seli ili kuashiria mstatili. Unapoachia panya, kipengele kipya kinaundwa kikichukua safuwima na safu mlalo ulizochagua. Zana hii inasaidia kiwango cha juu cha vipengele 16. Kila kipengele unachochora kinapata sheria yake ya grid-column na grid-row kwenye CSS na div inayolingana kwenye HTML. Vipengele vinaweza kuingiliana, na kile kilichochorwa baadaye kinakaa juu. Ukihitaji kuondoa kipengele, bonyeza alama ya "×" iliyo juu yake.

Vigezo vya Kuingiza (Inputs)

Zana inakubali vigezo vifuatavyo ili kuunda gridi yako:

  • Safuwima: Idadi ya safuwima kuanzia 1 hadi 12.
  • Safu mlalo: Idadi ya safu mlalo kuanzia 1 hadi 12.
  • Nafasi ya safuwima: Thamani ya nambari kati ya 0 na 48px.
  • Nafasi ya safu mlalo: Thamani ya nambari kati ya 0 na 48px.
  • Saizi za safuwima: Thamani yoyote halali ya CSS grid, kama vile 1fr, 200px, auto, min-content, au minmax(120px, 1fr).
  • Saizi za safu mlalo: Thamani yoyote halali ya CSS grid, kama vile 1fr, 200px, auto, min-content, au minmax(120px, 1fr).
  • Uwekaji wa Kipengele (Item placement): Kuburuta panya kwenye seli ili kuashiria eneo la mstatili.

Matokeo ya Msimbo (Outputs)

Zana inazalisha matokeo katika sehemu mbili kuu:

  1. CSS: Msimbo wa CSS unaofafanua chombo cha gridi (grid container) kwa kutumia display: grid, pamoja na sheria maalum za nafasi na saizi za kila kipengele kilichowekwa.
  2. HTML: Msimbo wa HTML unaojumuisha chombo kikuu na vitambulisho vya div kwa kila kipengele kilichowekwa ndani ya gridi.

Ukibonyeza "Ongeza kipengele", zana inazalisha kipengele cha HTML. Ukibonyeza "Futa vipengele", vipengele vyote vinaondolewa na kubakisha chombo cha HTML kikiwa tupu na idadi ya vipengele kuwa 0.

Sheria za Msimbo na Hali Maalum

Zana inafuata sheria maalum za uandishi wa CSS ili kuhakikisha msimbo unabaki mfupi na safi:

  • Kukunja Njia (Track Folding): Njia (safuwima au safu mlalo) zinazoshiriki saizi sawa zinakusanywa na kuandikwa kwa kutumia mfumo wa repeat() katika msimbo wa CSS.
  • Uunganishaji wa Nafasi (Gap Collapse): Nafasi ya safuwima na nafasi ya safu mlalo zinawekwa kivyake. Hata hivyo, zinapolingana kwa thamani, zinaunganishwa kuwa sifa moja ya gap kwenye msimbo wa CSS.
  • Thamani Isiyo Halali: Ukijaza thamani isiyo halali kama vile not-a-grid-track kwenye kisanduku cha saizi, kisanduku hicho kitaonyeshwa kuwa si halali, lakini msimbo wa CSS utaendelea kutumia thamani halali ya mwisho iliyoingizwa.

Vipimo vya Awali

Zana inakuja na mifumo iliyoandaliwa tayari ili kurahisisha uundaji wa miundo ya kawaida ya tovuti:

  • Mwambaa wa Kando: Mpangilio unaojumuisha eneo kuu la maudhui na mwambaa wa kando.
  • Kijajuu na Kijachini: Muundo wa kawaida wa tovuti wenye sehemu ya juu, eneo la kati, na sehemu ya chini.
  • Matunzio: Mpangilio unaozalisha safuwima 3, safu mlalo 2, na vipengele 3 vilivyopangwa tayari.
  • Dashboard: Mpangilio tata zaidi unaofaa kwa kurasa za udhibiti na takwimu.

Maswali Yanayoulizwa Mara kwa Mara (FAQ)

Je, ninawekaje vipengele kwenye gridi?
Bonyeza na uburute kwenye seli ili kuashiria mstatili — unapoachia inakuwa kipengele kilichowekwa kinachochukua safuwima na safu mlalo hizo. Kila kipengele unachochora kinapata sheria yake ya grid-column na grid-row kwenye CSS na div inayolingana kwenye HTML. Vipengele vinaweza kuingiliana, na kile kilichochorwa baadaye kinakaa juu; tumia × kwenye kipengele ili kukiondoa.

Je, safuwima na safu mlalo zinaweza kuwa na saizi tofauti?
Ndiyo. Kila njia (track) ina kisanduku chake cha saizi, na unaweza kuandika thamani yoyote ya gridi hapo — 1fr, 200px, auto, min-content au minmax(120px, 1fr). Njia zinazoshiriki saizi sawa zinakusanywa kwenye repeat() ili matokeo yabaki mafupi. Nafasi ya safuwima na safu mlalo zinawekwa kivyake, na kuungana kuwa nafasi moja zinapolingana.

Nifanye nini na msimbo uliotengenezwa?
Nakili CSS na HTML kando kwa kando. HTML inakupa chombo chenye div moja kwa kila kipengele, na CSS inafafanua gridi na kuweka nafasi ya kila kipengele. Bandika zote mbili kwenye mradi wako na utapata mpangilio ule ule uliouchora hapa.

Je, data yangu inatumwa kwenye seva?
Hapana. Gridi yako inaundwa moja kwa moja kwenye kivinjari chako. Hakuna unachoingiza hapa kinachopakiwa kwenye BroBroGo.

Jenereta ya CSS Cubic BezierBuruta mishiko miwili ili kuunda mkondo wa easing, tazama nukta inavyosafiri kulingana na ile thabiti, na unakili thamani ya cubic-bezier().Jenereta ya FlexboxWeka chombo cha flex na vipengele vyake kwa vidhibiti vya macho, tazama mpangilio unavyobadilika moja kwa moja, na unakili CSS kwa mbofyo mmoja.Jenereta ya Box ShadowBuruta vitelezi ili kuunda box-shadow, weka tabaka kwa kina zaidi, na unakili CSS iliyokamilika papo hapo.Jenereta ya GradientUnda gradient ya linear, radial, au conic, ongeza vituo vya rangi na uweke mwelekeo, kisha unakili CSS kwa mbofyo mmoja.Jenereta ya Border RadiusFanya kila pembe kuwa ya mduara kwa vitelezi, unda maumbo asilia ya blob kwa njia ya duaradufu, na unakili CSS papo hapo.Kikokotoo cha CSS clamp()Ingiza saizi ya skrini ndogo na kubwa na upate thamani ya clamp() inayobadilika vizuri katikati yake — kwa ajili ya saizi za fonti, padding, margin au gap.