Dhaliyaha CSS Grid

Dejiso tiirarkaaga iyo safarkaaga, ku jiid unugyada dushooda si aad u dhigto walxaha, oo ku koobiyeey grid CSS-ka iyo HTML-ka u dhigma hal gujin.

Hababka Diyaarsan
Walxaha
CSS
HTML
Ku jiid grid-ka dushiisa si aad u dhigto shay.

Grid-kaaga waxaa si toos ah loogu dhisayaa biraawsarkaaga. Waxba oo aad halkan ku dejiso looma soo gudbiyo BroBroGo.

Su'aalaha badanaa la isweydiiyo

Sideen walxaha u dhigaa grid-ka dushiisa?

Riix oo ku jiid unugyada (cells) si aad u calaamadiso leydi — marka aad sii dayso wuxuu noqonayaa ilmo la dhigay oo ku fidsan tiirarkaas iyo safarkaas. Shay kasta oo aad sawirto wuxuu helayaa xeer u gaar ah oo grid-column iyo grid-row ah oo ku jira CSS-ka iyo div u dhigma oo ku jira HTML-ka. Walxuhu way isku dul dhici karaan, kan dambe ee la sawirayna wuxuu fadhiisanayaa dusha sare; isticmaal × shayga ku yaal si aad u saarto.

Miyaa tiirarka iyo safarku noqon karaan cabbirro kala duwan?

Haa. Track kasta wuxuu leeyahay sanduuq cabbir u gaar ah, waxaadna ku qori kartaa qiimo kasta oo grid ah halkaas — 1fr, 200px, auto, min-content ama minmax(120px, 1fr). Track-yada wadaaga cabbirka isku midka ah waxaa lagu soo ururiyaa repeat() si wax-soo-saarku u ahaado mid gaaban. Column gap iyo row gap waxaa loo dejiyaa si gaar ah, waxayna isugu dhowraan hal gap marka ay isku mid yihiin.

Maxaan ku sameeyaa koodka la soo saaray?

Koobiyeey CSS-ka iyo HTML-ka dhinac ilaa dhinac. HTML-ku wuxuu ku siinayaa weelka (container) oo leh hal div shay kasta, CSS-kuna wuxuu qeexayaa grid-ka wuxuuna meeleeyaa shay kasta. Ku dheji labadaba mashruucaaga waxaadna helaysaa qaabkii aad halkan ku sawirtay.

Dhaliyaha CSS Cubic BezierJiid labada gacan si aad u qaabayso qalooca, daawo dhibic raacaysa marka la barbardhigo mid joogto ah, oo koobiyeey qiimaha cubic-bezier().Dhaliyaha FlexboxU diyaari weel flex ah iyo walxihiisa adigoo isticmaalaya xakamaynta muuqaalka, daawo qaabka oo si toos ah u falcelinaya, oo ku koobiyeey CSS-ka hal gujin.Dhaliyaha Box ShadowJiid jiidadaha si aad u qaabayso box-shadow, isku dul radd lakabyo si aad u hesho qoto-dheer, oo si degdeg ah u koobiyeey CSS-ka dhammaaday.Dhaliyaha GradientDhis gradient linear, radial, ama conic ah, ku dar istaagyada midabka oo dejiso jihada, ka dibna ku koobiyeey CSS-ka hal gujin.Dhaliyaha Border RadiusU wareeji gees kasta adigoo isticmaalaya jiidado, ku qaabeey qaabab dabiici ah habka elliptical-ka, oo si degdeg ah u koobiyeey CSS-ka.Xisaabiyaha CSS clamp()Geli cabbir loogu talagalay shaashadaha yaryar iyo kuwa waaweyn si aad u hesho qiimo dabiici ah oo clamp() ah oo si habsmooth ah ugu dhex miisaamaya — ee cabbirrada farta, padding, margins ama gaps.