CSS Grid — Qaab-dhismeedka Laba-Jiho

Ka dib markaad baratay Flexbox (hal-jiho), hadda waxaa la joogaa waqtigii ku habboonaa ee aad baran lahayd CSS Grid — oo ah nidaamka laba-jiho (two-dimensional) ee qaabaynta (layout-ka) bogagga [1]. Halka Flexbox uu ku fiican yahay qaabaynta hal saf ama hal tiir, Grid wuxuu kuu sahlayaa inaad maamusho labada jiho isku mar (jiif iyo toosan). Habkani wuxuu aad ugu habboon yahay qaab-dhismeedka guud iyo kuwa waaweyn ee bogagga internetka.

display: grid — Sida Loo Bilaabo

Si aad u bilaawdo isticmaalka Grid, waxaad u baahan tahay hal sifo oo kaliya:

.weelka {
  display: grid;
}

Kaliya tan oo qura kuma filna — waxaad u baahan tahay inaad qeexdo tiirarka (columns) iyo safafka (rows). Haddii kale, curiyayaashu waxay u bixi doonaan hal tiir oo toosan iyagoo isku duminaya dusha sare ee midba midka kale.

grid-template-columns — Tiirarka

Sifadani waxay qeexaysaa ballaca iyo tirada tiirarka weelka:

.weelka {
  display: grid;
  grid-template-columns: 200px 300px 200px; /* 3 tiir */
}

Tiir kasta waxaa loo qoondeeyay ballac gaar ah:

Unugga fr (Fractional Unit)

fr waa halbeeg gaar ah oo loo adeegsado Grid — wuxuuna booska bannaan ee weelka u qaybiyaa qaybo isku-dheelli tiran:

.weelka {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  /* Wadarta waa 4 qaybood: Tiirka labaad (2) wuxuu noqonayaa laba jeer ka weyn tiirarka koowaad (1) iyo saddexaad (3) */
}

grid-template-rows — Safafka

Si la mid ah tiirarka, waxaad sidoo kale qeexi kartaa dhererka safafka:

.weelka {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px auto;
}

gap — Kala-fogaanshaha

Sida Flexbox-ka, waxaad halkan ku isticmaali kartaa sifooyinka gap, row-gap, iyo column-gap si aad u kala fojiso curiyayaasha:

.weelka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* Masaafada safka: 20px, Masaafada tiirka: 20px  */
}

grid-column iyo grid-row — Kala-bixinta Curiyayaasha

Marka Grid la rido, curiyayaasha carruurta ah waxay si toos ah u degaan unugyada isku xiga. Laakiin waxaad ku qasbi kartaa hal curiye inuu u kala baxo dhowr tiir ama dhowr saf:

.header {
  grid-column: 1 / -1; /* Wuxuu qaadanayaa dhammaan tiirarka */
  /* grid-column: 1 / 3 — wuxuu qaadanayaa laga bilaabo tiirka 1aad ilaa ka horreeya kan 3aad */
}

.sidebar {
  grid-row: 2 / 4; /* Laga bilaabo safka 2aad ilaa ka horreeya kan 4aad */
}

.main {
  grid-column: 2 / 4; /* Laga bilaabo tiirka 2aad ilaa ka horreeya kan 4aad */
}

Ogow: Xisaabinta Grid waxay ku socotaa xariiqyo (lines) — ee kuma socoto unugyo ama tiirar caadi ah. Tusaale ahaan, tiirka koowaad wuxuu u dhexeeyaa xariiqda 1aad iyo xariiqda 2aad.

grid-template-areas — Qaabaynta iyadoo la isticmaalayo Magacyada

Tani waa mid ka mid ah sifooyinka ugu xoogga badan ee CSS Grid. Waxaad si toos ah u magacaabi kartaa meelaha (areas) adigoo naqshaddooda u qoraya si muuqaal ahaan loo fahmi karo:

.weelka {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  gap: 0;
  min-height: 100vh;
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

Faa’iidada weyn ee habkan: Koodka grid-template-areas wuxuu si sax ah u sawirayaa qaab-dhismeedka guud ee boggaaga — taas oo kuu sahlaysa inaad aragto sida boggu u qaybsan yahay!

auto-fill iyo auto-fit

Sifooyinkani waxay aad ugu muhiimsan yihiin dhismaha mashaariicda la-jaanqaadka leh (responsive designs):

.kaadhada {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

• auto-fill: Wuxuu abuuraa tiirar badan intii suurtogal ah ee ku habboon ballaca weelka, xataa haddii ay maran yihiin (empty slots).
• auto-fit: La mid ah auto-fill laakiin wuxuu dumiyaa tiirarka maran si kuwa kale u fidaan oo ay u buuxiyaan booska.
• minmax(250px, 1fr): Tiir kasta wuxuu yeelanayaa ugu yaraan ballac dhan 250px, laakiin wuu kori karaa ilaa inta bannaan ee suurtogalka ah (1fr).

Xaddididda Cabbirka Ugu Yar iyo Ugu Badan (minmax)

.grid-ka {
  display: grid;
  grid-template-columns: minmax(200px, 400px) 1fr;
  /* Tiirka koowaad: ugu yaraan wuxuu noqonayaa 200px, ugu badnaanna wuxuu gaarayaa 400px */
}

Magacaabista Xariiqyada Grid-ka (Named Lines)

Waxaad magacaabi kartaa xariiqyada grid-ka si ay u fududaato qaabaynta:

.weelka {
  display: grid;
  grid-template-columns:
    [sidebar-start] 220px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows:
    [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
}

header {
  grid-column: sidebar-start / main-end;
  grid-row: header-start / header-end;
}

Tusaale Mashruuc Dhamaystiran oo ku saabsan CSS Grid

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <title>CSS Grid — Qaab-dhismeedka Bogga</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, sans-serif; background: #f5f5f5; }

    /* Naqshadaynta Grid-ka — qaabka bogga oo dhan */
    .bogga {
      display: grid;
      grid-template-columns: 220px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
      min-height: 100vh;
      gap: 0;
    }

    header { grid-area: header; }
    aside  { grid-area: sidebar; }
    main   { grid-area: main; }
    footer { grid-area: footer; }

    /* Qaybta Sare (Header) */
    header {
      background: #0f172a;
      color: white;
      padding: 16px 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .logo { font-size: 1.25rem; font-weight: 700; color: #38bdf8; }
    header nav { display: flex; gap: 20px; }
    header a { color: #94a3b8; text-decoration: none; font-size: 0.875rem; }
    header a:hover { color: white; }

    /* Baarka Dhinaca (Sidebar) */
    aside {
      background: white;
      border-right: 1px solid #e2e8f0;
      padding: 24px 16px;
    }
    aside h3 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; margin-bottom: 12px; }
    aside a { display: block; padding: 8px 12px; color: #334155; text-decoration: none; font-size: 0.875rem; border-radius: 8px; margin-bottom: 2px; }
    aside a:hover { background: #f1f5f9; color: #0f172a; }
    aside a.active { background: #eff6ff; color: #2563eb; font-weight: 600; }

    /* Nuxurka Guud (Main content) */
    main {
      padding: 32px 40px;
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      align-content: start;
    }

    .kaadhka {
      background: white;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 24px;
    }
    .kaadhka .icon { font-size: 2rem; margin-bottom: 12px; }
    .kaadhka h3  { font-size: 1rem; color: #0f172a; margin-bottom: 8px; }
    .kaadhka p   { font-size: 0.85rem; color: #64748b; line-height: 1.6; }
    .kaadhka .tag {
      display: inline-block;
      margin-top: 12px;
      font-size: 0.75rem;
      background: #f1f5f9;
      color: #475569;
      padding: 4px 10px;
      border-radius: 99px;
    }

    /* Meelaynta Grid-ka — curiyaha u kala baxa tiirar badan */
    .weyn {
      grid-column: span 2;
    }

    /* Qeybta Hoose (Footer) */
    footer {
      grid-area: footer;
      background: #0f172a;
      color: #64748b;
      text-align: center;
      padding: 20px;
      font-size: 0.85rem;
    }
  </style>
</head>
<body>

<div class="bogga">
  <header>
    <span class="logo">Ereyle</span>
    <nav>
      <a href="#">Hoyga</a>
      <a href="#">Koorsooyinka</a>
      <a href="#">Blog</a>
    </nav>
  </header>

  <aside>
    <h3>CSS Grid</h3>
    <a href="#" class="active">Qaabka Aasaasiga</a>
    <a href="#">Tiirarka</a>
    <a href="#">Safka</a>
    <a href="#">Grid Areas</a>
    <a href="#">Jawaab-celinta</a>
  </aside>

  <main>
    <div class="kaadhka weyn">
      <div class="icon">📐</div>
      <h3>CSS Grid</h3>
      <p>CSS Grid waa nidaamka layout-ka ee laba-jiho. Wuxuu kuu ogolaanayaa inaad abuurto qaab-dhismeed adag oo tiirar iyo safo isku daraysan.</p>
      <span class="tag">grid</span>
    </div>

    <div class="kaadhka">
      <div class="icon">↔️</div>
      <h3>Tiirar Fudud</h3>
      <p>Isticmaal <code>grid-template-columns</code> si aad u qeexdo tiirarka. Halbeega <code>fr</code> wuxuu qaybiyaa bannaan.</p>
      <span class="tag">columns</span>
    </div>

    <div class="kaadhka">
      <div class="icon">↕️</div>
      <h3>Safo Nidaamsan</h3>
      <p><code>grid-template-rows</code> wuxuu qeexaa dhererka saf kasta. Waxaad isticmaali kartaa <code>auto</code>, <code>1fr</code>, iyo <code>px</code>.</p>
      <span class="tag">rows</span>
    </div>

    <div class="kaadhka">
      <div class="icon">🧩</div>
      <h3>Grid Areas</h3>
      <p>Waxaad magacawdaa meelaha adigoo isticmaalaya <code>grid-template-areas</code> — sida sawirka layout-ka.</p>
      <span class="tag">areas</span>
    </div>

    <div class="kaadhka">
      <div class="icon">📱</div>
      <h3>Auto-fill &amp; Minmax</h3>
      <p><code>auto-fill</code> iyo <code>minmax()</code> waxay ka dhigaan grid-ka mid jawaab-celin leh.</p>
      <span class="tag">responsive</span>
    </div>
  </main>

  <footer>© 2026 Ereyle. Dhammaan casharada CSS waa bilaash.</footer>
</div>

</body>
</html>

Casharka xiga: Waxaan ku baran doonaa Naqshadaynta La-jaanqaada Shaashadaha (Responsive Design) ee CSS.