Qaab-dhismeedka Bogga (Page Layout Patterns)

Casharkan waxaan ku baran doonnaa hannaanka qaab-dhismeedka bogga ee dhabta ah — kuwaas oo ah qaababka (patterns) ugu caansan ee ay isticmaalaan mareegaha internetka ee casriga ah [1]. Waxyaabaha aan baran doonno waxaa ka mid ah qaabka rasmiga ah ee Holy Grail Layout (header, sidebar, main, footer), sticky footer (baarka hoose ee dagan), qaybaha fidsan ee dhan kasta ah (full-bleed sections), qoraalka tiirarka badan (multi-column text), iyo sida loo maareeyo sawirrada iyadoo la adeegsanayo object-fit iyo aspect-ratio [1]. Kuwani waa agabka ugu muhiimsan ee aad u baahan tahay si aad u dhisto bog kasta.

Holy Grail Layout

Kani waa qaabka ugu caansan ee naqshadaynta mareegaha: baar sare (header), baar dhinac ah (sidebar), nuxurka guud ee dhexda (main), iyo baarka ugu hooseeya (footer):

.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;
}

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

Faa’iidada: Sifada min-height: 100vh waxay xaqiijinaysaa in boggu gebi ahaanba buuxiyo dhererka shaashadda, xataa haddii nuxurka maqaalku uu aad u yar yahay — taas oo ka dhigaysa in baarka hoose (footer) uu had iyo jeer ku dagan yahay qaybta ugu hooseysa ee shaashadda.

Baarka Hoose ee Dagan (Sticky Footer adoo adeegsanaya Flexbox)

Waxaad sidoo kale naqshaddaan si dhib yar ugu dhoodhoobi kartaa nidaamka Flexbox:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.nuxurka {
  flex: 1; /* Nuxurka guud ayaa sii ballaranaya si uu u buuxiyo booska bannaan */
}

footer {
  /* Wuxuu u degayaa qaybta ugu hooseysa si toos ah */
}

Qaybaha Fidsan ee Dhan Kasta Ah (Full-bleed Sections)

Qaybaha loo yaqaan ‘full-bleed’ waxay ka dhex baxaan weelkooda waalidka ah, iyagoo si buuxda u daboolaya dhammaan ballaca shaashadda bog-furaha:

.hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 80px 20px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: white;
}

/* U adeegso weel ka dhex dhashay gudihiisa: */
.hero .weelka-gudaha {
  max-width: 1200px;
  margin: 0 auto;
}

Ogow: Qaaciddada margin-left: calc(-50vw + 50%) waxay qaybtaas ka dhigaysaa mid si buuxda ugu fidsan dhan kasta (full-width) iyada oo aan haba yaraatee loo baahnayn in curiyaha laga saaro weelkii uu markii hore ku jiray.

Nuxurka Dhexda la Gelinayo — max-width iyo margin: 0 auto

Kani waa hannaanka ugu caansan ee loo adeegsado in nuxurka bogga lagu dhex-geeyo dhexda:

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

Qaab-dhismeedka Isku-dheelitir la’aanta ah (Asymmetric Layouts)

Nidaamka CSS Grid wuxuu si heer sare ah ugu fiican yahay dhisidda naqshado aan isku-simanayn (asymmetric layouts):

.layout-asymmetric {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

.weyn { grid-column: 1; grid-row: 1 / 3; }  /* Wuxuu qaadanayaa laba saf oo dherer ah */
.dhexe { grid-column: 2 / 4; }                 /* Wuxuu qaadanayaa laba tiir oo ballac ah */
.yar { }                                       /* Wuxuu qaadanayaa cabbirka caadiga ah */

Sifada aspect-ratio — Saamiga

CSS waxay kuu ogolaanaysaa inaad qeexdo saamiga u dhexeeya ballaca iyo dhererka (aspect-ratio) ee curiyaha:

.sawir-weelka {
  aspect-ratio: 16 / 9; /* Muuqaalka ballaran (Widescreen) */
  width: 100%;
  background: #e2e8f0;
}

.wareega {
  aspect-ratio: 1; /* Afar-geesood siman (Square) */
  width: 100px;
  border-radius: 50%;
}

object-fit iyo object-position — Ku-habboonaanta Muuqaallada

Sifooyinkani waxay go’aamiyaan sida ay sawirrada iyo muuqaalladu ugu dhex fariistaan weelka loo cayimay:

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* Buuxi weelka adigoo qaybaha dheeraadka ah jaraya (cover) */
  object-position: center;  /* Xuddunta dhexda (caadiga ah) */
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: contain;      /* Muuji sawirka oo dhan isagoo is-waafajinaya (contain) */
  object-fit: fill;         /* Fidi sawirka si uu u buuxiyo (saamiga muuqaalku wuu qasmi karaa) */
  object-fit: scale-down;   /* Wuxuu dooranayaa cabbirka ugu yar ee u dhexeeya contain iyo none */
}

Tiirarka Qoraalka badan (CSS Multi-column Layout)

CSS waxay kuu sahlaysaa inaad qoraalka maqaalka u kala qaybiso tiirar is-barbar socda oo la dhex maro (sida joornaalada iyo wargaysyada rasmiga ah):

.qoraalka-tiirarka {
  column-count: 3;           /* Saddex tiir oo is-barbar socda */
  column-gap: 32px;          /* Masaafada u dhaxaysa tiirarka */
  column-rule: 1px solid #e2e8f0; /* Xariiq khafiif ah oo u dhaxaysa tiirarka */
}

.cinwaanka-tiirka {
  column-span: all;          /* Wuxuu ku fidsan yahay dhammaan tiirarka isagoo dhex-gala */
}

Tusaale Mashruuc Dhamaystiran

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Magazine Layout — Full-page</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, serif;
      background: #fafafa;
      color: #0f172a;
    }

    /* Naqshadaynta Holy Grail Grid */
    .bogga {
      display: grid;
      grid-template-columns: 240px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
      min-height: 100vh;
    }

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

    /* Baarka Sare (Header) */
    header {
      background: #0f172a;
      color: white;
      padding: 16px 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .logo { font-size: 1.1rem; font-weight: 700; color: #f59e0b; letter-spacing: -0.02em; }
    header nav { display: flex; gap: 16px; }
    header a { color: #94a3b8; text-decoration: none; font-size: 0.85rem; }
    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: #475569;
      text-decoration: none;
      font-size: 0.85rem;
      border-radius: 8px;
      margin-bottom: 2px;
    }
    aside a:hover { background: #f1f5f9; color: #0f172a; }
    aside a.active { background: #fef3c7; color: #92400e; font-weight: 600; }

    /* Nuxurka Guud (Main) */
    main {
      padding: 0;
    }

    /* Qaybta Fidsan ee Dhan Kasta Ah (Full-bleed Hero) */
    .hero {
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      padding: 80px 40px;
      background: linear-gradient(135deg, #1e293b, #0f172a);
      color: white;
      margin-bottom: 40px;
    }
    .hero .gudaha {
      max-width: 800px;
      margin: 0 auto;
    }
    .hero h1 {
      font-size: clamp(1.8rem, 5vw, 2.8rem);
      line-height: 1.2;
    }
    .hero p {
      color: #94a3b8;
      margin-top: 12px;
      font-size: 1rem;
      max-width: 600px;
      line-height: 1.7;
    }

    /* Nuxurka Qoraalka */
    .nuxur {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 32px 40px;
    }

    .nuxur h2 {
      font-size: 1.5rem;
      margin-bottom: 16px;
    }

    /* Qoraalka tiirarka badan */
    .tiirar {
      column-count: 2;
      column-gap: 32px;
      column-rule: 1px solid #e2e8f0;
      margin-bottom: 32px;
    }

    .tiirar p {
      font-size: 0.95rem;
      line-height: 1.8;
      color: #334155;
      margin-bottom: 16px;
    }

    .tiirar .span-all {
      column-span: all;
      margin: 16px 0;
      padding: 16px 20px;
      background: #f8fafc;
      border-radius: 8px;
      border-left: 4px solid #f59e0b;
      font-style: italic;
      display: block;
    }

    /* Galleriga sawirrada oo leh aspect-ratio */
    .sawirrada {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
      margin: 32px 0;
    }

    .sawir-box {
      aspect-ratio: 16 / 9;
      background: #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
    }

    .sawir-box .fill {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Kaadhadhka isku-dheelitir la'aanta ah (Asymmetric Grid) */
    .asymmetric {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 16px;
      margin: 24px 0;
    }

    .asymmetric .card {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 20px;
    }
    .asymmetric .card.weyn {
      grid-row: span 2;
    }
    .asymmetric .card h3 { font-size: 0.95rem; margin-bottom: 6px; }
    .asymmetric .card p  { font-size: 0.8rem; color: #64748b; line-height: 1.5; }
    .asymmetric .card .icon { font-size: 1.5rem; margin-bottom: 8px; }

    /* Qeybta Hoose (Footer) */
    footer {
      background: #0f172a;
      color: #94a3b8;
      text-align: center;
      padding: 24px;
      font-size: 0.85rem;
    }

    @media (max-width: 768px) {
      .bogga {
        grid-template-columns: 1fr;
        grid-template-areas:
          "header"
          "main"
          "footer";
      }
      aside { display: none; }
      .tiirar { column-count: 1; }
      .asymmetric { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>

<div class="bogga">
  <header>
    <span class="logo">Ereyle Mag</span>
    <nav>
      <a href="#">Hoyga</a>
      <a href="#">Qoraallo</a>
      <a href="#">CSS</a>
    </nav>
  </header>

  <aside>
    <h3>CSS Layouts</h3>
    <a href="#" class="active">Holy Grail</a>
    <a href="#">Full-bleed</a>
    <a href="#">Multi-column</a>
    <a href="#">Asymmetric</a>
    <a href="#">Object-fit</a>
  </aside>

  <main>
    <div class="hero">
      <div class="gudaha">
        <h1>CSS Layout Patterns</h1>
        <p>Holy Grail, sticky footer, full-bleed sections, multi-column text, asymmetric grids — dhammaan qaab-dhismeedka bogagga casriga ah ee mashaariicda bogagga internetka.</p>
      </div>
    </div>

    <div class="nuxur">
      <h2>Multi-Column Text</h2>
      <div class="tiirar">
        <p>CSS columns waxay u oggolaanaysaa qoraalka inuu u qaybsamo tiirar badan — sida joornaalka. Tan waxaa lagu gaaraa <code>column-count</code> iyo <code>column-gap</code>. Qoraalku wuxuu si otomaatik ah ugu qaybsamaa tiirarka, isagoo la qabsanaya dhererka weelka.</p>
        <p>Tan waxay faa'iido u leedahay bogagga qoraalka badan sida maqaallada, blog-yada, iyo joornaalada online-ka ah. Waa qaab qurux badan o akhriska fududeeya.</p>
        <p class="span-all">"CSS columns waa qalab la iloobo badan — wuxuu fududeeyaa qaybinta qoraalka tiirar badan iyada oo aan loo baahnayn grid ama flexbox."</p>
        <p>Waxaad sidoo kale isticmaali kartaa <code>column-rule</code> si aad u dhex dhigto xariiq khafiif ah oo u dhaxaysa tiirarka tan iyo kala-sooca muuqda. <code>column-span: all</code> wuxuu u oggolaanayaa unug gaar ah inuu dhaafo dhammaan tiirarka.</p>
      </div>

      <h2>Galleriga sawirrada oo leh Aspect-ratio</h2>
      <div class="sawirrada">
        <div class="sawir-box"><div class="fill" style="background: linear-gradient(135deg, #667eea, #764ba2);"></div></div>
        <div class="sawir-box"><div class="fill" style="background: linear-gradient(135deg, #f093fb, #f5576c);"></div></div>
        <div class="sawir-box"><div class="fill" style="background: linear-gradient(135deg, #4facfe, #00f2fe);"></div></div>
        <div class="sawir-box"><div class="fill" style="background: linear-gradient(135deg, #43e97b, #38f9d7);"></div></div>
        <div class="sawir-box"><div class="fill" style="background: linear-gradient(135deg, #fa709a, #fee140);"></div></div>
        <div class="sawir-box"><div class="fill" style="background: linear-gradient(135deg, #a18cd1, #fbc2eb);"></div></div>
      </div>

      <h2>Asymmetric Grid Layout</h2>
      <div class="asymmetric">
        <div class="card weyn">
          <div class="icon">✨</div>
          <h3>CSS Grid — Qaab-dhismeed kasta</h3>
          <p>Asymmetric layouts waxay u oggolaanayaan inaad abuurto qaabab aan caadi ahayn oo xiisa leh. Qaybaha weyn waxay qaadan karaan laba saf ama laba tiir.</p>
        </div>
        <div class="card">
          <div class="icon">📐</div>
          <h3>Flexbox</h3>
          <p>Hal-jiho layout fudud oo dabacsan.</p>
        </div>
        <div class="card">
          <div class="icon">🖼️</div>
          <h3>Object-fit</h3>
          <p>Sawirrada ku habboon weelkooda.</p>
        </div>
        <div class="card">
          <div class="icon">📱</div>
          <h3>Responsive</h3>
          <p>Layout-ka isbeddela shaashad kasta.</p>
        </div>
        <div class="card">
          <div class="icon">🎯</div>
          <h3>Sticky Footer</h3>
          <p>Footer-ka hoose ku dhaggan.</p>
        </div>
      </div>
    </div>
  </main>

  <footer>© 2026 Ereyle Mag — Dhammaan xuquuqdu waa dhowran tahay.</footer>
</div>

</body>
</html>

Casharka xiga: Waxaan ku baran doonnak Hababka ugu Fiican iyo Dayactirka Koodka CSS (CSS Best Practices).