basic Grid Layout CSS

Hordhac

CSS Grid Layout waa mid ka mid ah qaababka ugu awoodda badan uguna casrisan ee loogu talagalay in lagu maamulo qorsheynta iyo qaabaynta bogagga websaydhka. Grid wuxuu ku salaysan yahay nidaam xariiqyo iyo tiirar ah oo kuu oggolaanaya inaad si fudud u qorsheyn karto meelaha iyo walxaha ka kooban bogga. Farsamadan ayaa laga bilaabay inay caan noqoto markii baahida loo qabay naqshadayn horumarsan oo xasilloon ay soo kordheen, waxaana si gaar ah loogu adeegsadaa samaynta naqshado dareen leh (responsive).

Waa maxay Grid Layout?

basic Grid Layout CSS

CSS Grid Layout waa farsamo kaa caawinaysa inaad ku habeeysid walxaha webka (elements) hab grid ah. Grid-ka waxaa ku jira laba qaybood oo muhiim ah:

1. Tiirar (columns) - waa qaybo toosan oo kala qaybiya ballaca layout-ka.
2. Xariiqyo (rows) - waa qaybo jiifa oo kala qaybiya dhererka layout-ka.

Markaad isticmaasho grid, waxaad si fudud u qorsheyn kartaa inta xariiq iyo tiir ee aad rabto inaad ku samayso boggaaga. Waxaa kaloo kuu fududaanaysa in walxahaaga aad dhigto meelo kala duwan adigoo isticmaalaya hal kood.

Sida Loo Abuurayo Grid Layout

Si aad u abuurto grid layout, waxaad u baahan tahay inaad isticmaasho sifooyinka CSS ee gaarka u ah grid-ka. Marka hore, waxaad u baahan tahay inaad ku qeexdo walaxdaada inay noqoto grid, taas oo lagu sameeyo iyadoo la adeegsanayo sifooyinkan soo socda:

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

Sifada display: grid; waxay tilmaamaysaa in walaxda la isticmaalayo ay tahay grid. Sifada grid-template-columns ayaa tilmaamaysa inta tiir ee aad rabto in walaxdaada ay yeelato. Xaaladdan, waxaan isticmaalaynaa 3 tiir, iyadoo ay isticmaaleyso hal qayb oo siman (1fr).

Qaybo Muhiim ah oo Laga Faa’iidayo

1. grid-template-columns iyo grid-template-rows: Waxaad si gaar ah u go'aamin kartaa inta xariiq iyo tiir ee aad rabto.
2. grid-gap: Waxay kuu ogolaanaysaa inaad qeexdo farqiga u dhexeeya tiirarka iyo xariiqyada.
3. grid-auto-flow: Waxay kuu sahleysaa inaad qeexdo sida walxaha u socdaan markay ku jiraan grid-ka.

Isticmaalka Grid ee Naqshadaha Dareenka Leh

CSS Grid waa farsamo si gaar ah ugu wanaagsan naqshadaha dareenka leh (responsive designs). Waxaa lagu hagaajin karaa habka bogga uu u dhaqmo marka ballaca ama dhererka shaashadda uu isbedelo. Waxaad sidoo kale u adeegsan kartaa waxyaabo sida media queries si aad u qeexdo qaabka grid-ka ee qalabyo kala duwan sida mobilada, tablets, iyo desktops.

css

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Tusaalahan, haddii ballaca shaashadda uu ka yaraado 600px, grid-ka ayaa isbeddelaya wuxuuna noqonayaa hal tiir.

Faa’iidooyinka Isticmaalka Grid Layout

• Naqshado badan: CSS Grid wuxuu awood kuu siinayaa inaad samayso naqshado badan oo isku mid ah, iyada oo aan wax dhib ah lahayn.
• Isku xirnaan fudud: Waxaad si fudud isugu xiri kartaa qaybo kala duwan adigoo isticmaalaya grid-ka.
• Dareen leh: Waxaad sameyn kartaa naqshado dareen leh oo ku habboon qalab kasta adigoo isticmaalaya grid.

Gunaanad

CSS Grid Layout waa mid ka mid ah farsamooyinka ugu muhiimsan ee naqshadaha casriga ah. Waxay kuu oggolaanaysaa inaad si fudud u maamuli karto walxaha ku yaala boggaaga iyada oo qaab xariiq iyo tiir ah. Waa qalab waxtar leh oo loogu talagalay samaynta naqshado casri ah oo xasiloon, kuwaas oo ku habboon noocyada kala duwan ee qalabyada. Markaad fahamto aasaaska Grid Layout, waxaad awoodi doontaa inaad si fudud u naqshadeyso bogag kala duwan oo leh qaabab isku dhafan iyo tayo sare leh.