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.

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.