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.

Waxaa qortay oo dib u eegtay kooxda tafatirka ee BroBroGo.Markii ugu dambaysay ee la cusboonaysiiyay:

Hordhaca Qaabka CSS Grid Layout

CSS Grid Layout waa nidaam awood badan oo laba-cabbir leh (two-dimensional) oo loo isticmaalo qaabaynta boggaga internetka. Qalabkani wuxuu kuu sahlayaa inaad si muuqaal ah u naqshadayso qaabka grid-ka adigoo dejinaya tirada tiirarka iyo safafka, qeexaya cabbirkooda, iyo cayimida farqyada u dhexeeya. Markaad ku jiiddo unugyada dushooda si aad u meelayso walxaha, qalabku wuxuu si toos ah u soo saaraa koodka CSS iyo HTML ee u dhigma, kaas oo aad koobiyeysan karto si aad u isticmaasho.

Qalabkani wuxuu si gaar ah waxtar u leeyahay marka aad rabto inaad si degdeg ah u samayso tusaale hordhac ah (prototype) ee qaabka CSS grid, ama marka aad u baahan tahay inaad soo saarto koodka adigoon gacanta ku qorin, iyo sidoo kale inaad aragto sida cabbirrada kala duwan ee tiirarka iyo safarku u saameeyaan qaabka guud.

Fahanka grid-template-columns iyo grid-template-rows

Si loo qeexo qaabdhismeedka grid-ka, CSS wuxuu isticmaalaa sifooyinka grid-template-columns iyo grid-template-rows. Qalabkan dhexdiisa, waxaad ku qeexi kartaa tirada tiirarka iyo safarka adigoo dooranaya lambar u dhexeeya 1 iyo 12.

Track kasta (tiir ama saf) wuxuu leeyahay sanduuq cabbir u gaar ah oo aad ku qori karto qiimo kasta oo CSS grid ah oo sax ah. Qiimayaasha la taageero waxaa ka mid ah:

  • 1fr (fractional unit)
  • 200px (pixels)
  • auto (cabbir toos ah)
  • min-content
  • minmax(120px, 1fr)

Haddii aad geliso qiimo aan sax ahayn sida not-a-grid-track, sanduuqa gelinta waxaa loo calaamadinayaa inuu yahay mid aan sax ahayn, laakiin koodka CSS ee soo baxaya wuxuu hayn doonaa qiimihii ugu dambeeyay ee saxda ahaa ee la isticmaalay.

Halbeegga fr iyo Isticmaalka repeat()

Halbeegga fr (fraction) waa mid u gaar ah CSS Grid, wuxuuna ka dhigan yahay qayb ka mid ah booska bannaan ee ka haray weelka dhexdiisa. Tusaale ahaan, haddii aad leedahay saddex tiir oo mid kastaa yahay 1fr, booska waxaa loo qaybinayaa saddex qaybood oo siman.

Si koodka CSS u noqdo mid gaaban oo nadiif ah, qalabku wuxuu isticmaalaa habka isku-laabidda ee repeat(). Track-yada wadaaga cabbirka isku midka ah ee isku xiga waxaa lagu soo ururiyaa hal xeer oo repeat() ah koodka CSS ee soo baxa. Tusaale ahaan, halkii la qori lahaa 1fr 1fr 1fr, koodka soo baxaya wuxuu noqonayaa repeat(3, 1fr).

Dejinta Farqyada: column-gap iyo row-gap

Farqyada u dhexeeya tiirarka iyo safafka waxaa lagu xakameeyaa sifooyinka column-gap iyo row-gap. Qalabkan dhexdiisa, waxaad u dejin kartaa farqyadan si madaxbannaan:

  • Farqiga tiirarka: Lambar u dhexeeya 0 iyo 48px.
  • Farqiga safarka: Lambar u dhexeeya 0 iyo 48px.

In kasta oo loo dejiyo si gaar ah, haddii qiimaha farqiga tiirarka iyo farqiga safarku ay isku mid noqdaan, koodka CSS ee la soo saaro wuxuu isugu dhowrtaa hal sifo oo ah gap si loo yareeyo dhererka koodka.

Meelaynta Walxaha ee Grid-ka

Si aad walxo u dhigto grid-ka dushiisa, waxaad si fudud ugu jiidaysaa cursor-ka dusha unugyada si aad u calaamadiso aag leydi ah. Markaad sii dayso mouse-ka, waxaa dhalanaya ilmo la dhigay oo ku fidsan tiirarkaas iyo safarkaas.

Xeerarka meelaynta ee khuseeya walxaha la dhisay waxaa ka mid ah:

  • Shay kasta oo la sawiro 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; shayga dambe ee la sawiro wuxuu fadhiisanayaa dusha sare ee kuwa kale.
  • Qalabku wuxuu taageeraa ugu badnaan 16 walxood.
  • Waxaad ka saari kartaa shay kasta adigoo gujinaya calaamadda "×" ee ku taal shayga dhexdiisa.
  • Haddii aad gujiso "Nadiifi walxaha", weelka HTML wuxuu noqonayaa mid madhan, tirada walxahana waxay noqonaysaa 0.
  • Haddii aad gujiso "Ku dar shay", waxaa si toos ah loo dhalinayaa shay HTML ah.

Hababka Diyaarsan ee Naqshadaynta

Si aad u bilowdo naqshadaynta si degdeg ah, qalabku wuxuu bixiyaa dhowr habab oo diyaarsan (presets) oo caan ah:

  • Sidebar: Habka qaabdhismeedka leh dhinac u go'an iyo aagga nuxurka weyn.
  • Header & footer: Qaabka caadiga ah ee leh madax sare, nuxur dhexda ah, iyo salka hoose.
  • Gallery: Habkani wuxuu si toos ah u dhalinayaa 3 tiir, 2 saf, iyo 3 walxood.
  • Dashboard: Qaabdhismeed adag oo ku habboon boggaga maamulka iyo xog-soo-bandhigga.

Helitaanka iyo Gaarka Ahaanshaha Xogta

Badbaadada xogtaada iyo gaarka ahaanshaha waa muhiim. Grid-kaaga waxaa si toos ah loogu dhisayaa biraawsarkaaga. Waxba oo aad halkan ku dejiso looma soo gudbiyo BroBroGo. Tani waxay ka dhigan tahay in dhammaan habaynta iyo soo saarista koodka ay ka dhacayso gudaha kombuyuutarkaaga ama aaladda aad isticmaalayso.

Su'aalaha Badanaa La Isweydiiyo (FAQ)

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.

Waa maxay xadka ugu sarreeya ee walxaha aan abuuri karo?

Qalabku wuxuu taageeraa ugu badnaan 16 walxood oo aad ku dhex ridi karto grid-ka dhexdiisa. Haddii aad u baahan tahay inaad nadiifiso dhammaan walxaha aad abuurtay si aad dib uga bilowdo, waxaad isticmaali kartaa badhanka "Nadiifi walxaha".

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.