Qaabaynta shabaqle ee CSS Grid

Casharkaan, waxaan baran doonaa CSS Grid — hab awood badan oo loo qaabeeyo walxaha iyadoo la isticmaalayo shabakad (grid). Grid waxay ku habboon tahay qaabaynta guud ee bogga.

1. Waa maxay CSS Grid?

CSS Grid waa qaab laba-cabbir ah (2-dimensional) kaas oo kuu ogolaanaya inaad isku mar xakamayso safaf (rows) iyo tiirar (columns). Flexbox waa hal-cabbir (1D), Grid waa laba-cabbir (2D).

2. Bilowga Grid

Si aad u bilowdo, ku dar display: grid waalidka:

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: auto;
    gap: 16px;
}

Tani waxay abuurtaa saddex tiir oo kasta 200px balac ah, fogaansho 16px ah.

3. grid-template-columns

Waxay qeexdaa tiirarka iyo ballacahooda:

.container {
    grid-template-columns: 1fr 2fr 1fr;  /* 4 qaybood: 1 + 2 + 1 */
    grid-template-columns: repeat(3, 1fr); /* 3 tiir oo isku siman */
    grid-template-columns: 200px auto 200px; /* mid go'an, mid dabacsan */
}

fr (fraction): Waa halbeeg dabacsan oo qaybinaya booska dhammaan tiirarka.

4. grid-template-rows

Waxay qeexdaa safafka iyo dheeraantooda:

.container {
    grid-template-rows: 100px auto 100px;  /* header, content, footer */
}

5. Gap (Fogaanta)

Sida Flexbox, gap waxay qeexdaa fogaanta u dhaxaysa unugyada grid-ka:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;  /* 20px fogaansho dhamaan dhinacyada */
}

6. Meelaynta Walxaha Grid-ka

Waxaad go’aamin kartaa meesha uu shay ku bilaabmo oo ku dhamaado grid-ka:

.header {
    grid-column: 1 / -1;  /* dhammaan tiirarka */
    grid-row: 1;
}

.sidebar {
    grid-column: 1 / 2;   /* tiirka 1 ilaa 2 */
    grid-row: 2;
}

.content {
    grid-column: 2 / 4;   /* tiirka 2 ilaa 4 */
    grid-row: 2;
}

7. Tusaale: Layout Bog Oo Dhamaystiran

.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    min-height: 100vh;
    gap: 0;
}

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

Layli (Practice)

Abuur grid 3 tiir ah oo isku siman (1fr 1fr 1fr).
Ku dar 6 carruur (children) oo kala duwan.
Isticmaal grid-template-areas si aad u qaabayso bog: header, sidebar, main, footer.
Tijaabi grid-column iyo grid-row si aad u ballaariso shay gaar ah.

Sii wadashada: Casharka xigta, waxaan baran doonaa naqshadda isku-beddesha (responsive design)!