𝐍𝐚𝐬𝐬𝐢𝐫𝐜𝐞𝐨

Mafunzo ya CSS - Sehemu ya Tatu

CSS Grid na Upangaji wa Mitandao

CSS Grid ni nini?

CSS Grid ni mfumo wa kupangilia unaowezesha kuunda miundo ya mitandao kwa urahisi zaidi. Tofauti na Flexbox inayoshughulikia upangaji mmoja mwelekeo, Grid inakuwezesha kupanga vipengele kwa njia ya safu na mistari kwa wakati mmoja.

Kidokezo: Grid ni nzuri kwa upangaji wa jumla wa ukurasa, wakati Flexbox inafaa zaidi kwa upangaji ndani ya sehemu maalum.

Kuanza kutumia Grid

Kwa kutumia Grid, tunaweza kuunda muundo wa mitandao kwa kufafanua safu na mistari:

.container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* Safu tatu: ya kwanza na ya tatu 1 sehemu, ya pili 2 sehemu */ grid-template-rows: auto; /* Mstari unaokua kiotomatiki */ gap: 10px; /* Nafasi kati ya vipengele */ }

Mfano wa Grid rahisi

Kipengele 1

Kipengele 2

Kipengele 3

Kipengele 4

Kipengele 5

Kipengele 6

Kupanga Vipengele kwenye Grid

Unaweza kuweka kipengele mahali unapotaka kwenye grid kwa kutumia mistari:

.item { grid-column: 1 / 3; /* Kuanzia mstari wa kwanza hadi wa tatu */ grid-row: 1; /* Mstari wa kwanza */ } .another-item { grid-column: 2 / 4; /* Kuanzia mstari wa pili hadi wa nne */ grid-row: 1 / 3; /* Kuanzia mstari wa kwanza hadi wa tatu */ }

Mfano wa Grid Changamano

1

2

3

4

5

6

Grid hii ina safu tatu: upana wa kwanza na wa tatu ni 1fr, wa pili ni 2fr. Pia ina mistari miwili: ya kwanza 100px na ya pili 200px.

Grid Areas

Njia nyingine rahisi ya kupanga vipengele kwenye grid ni kutumia maeneo (areas):

.container { display: grid; grid-template-areas: "header header header" "sidebar content ads" "footer footer footer"; gap: 10px; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .ads { grid-area: ads; } .footer { grid-area: footer; }

Mfano wa Grid Areas

Header

Sidebar

Content

Ads

Footer

Sifa Muhimu za Grid

Kuna sifa nyingi muhimu za Grid zinazokupa urahisi wa kuunda miundo mbalimbali:

/* Kuweka nafasi kati ya vipengele */ gap: 10px; /* Zote: safu na mistari */ row-gap: 10px; /* Nafasi kati ya mistari */ column-gap: 15px; /* Nafasi kati ya safu */ /* Kupangilia vipengele ndani ya grid */ justify-items: center; /* Mlalo */ align-items: center; /* Wima */ /* Kupangilia grid yote ndani ya kontena */ justify-content: center; /* Mlalo */ align-content: center; /* Wima */

Kidokezo: Grid inasaidia sana katika kutengeneza mitandao inayobadilika (responsive). Kwa kutumia vitengo kama fr na kazi za kiotomatiki, grid inaweza kubadilika kwa ukubwa tofauti ya skrini.

Grid na Upangilifu Unaobadilika (Responsive)

Kwa kutumia Grid pamoja na media queries, tunaweza kuunda miundo tofauti kwa skrini za ukubwa tofauti:

/* Kwa skrini kubwa */ .container { display: grid; grid-template-columns: 1fr 3fr 1fr; } /* Kwa tablet */ @media (max-width: 768px) { .container { grid-template-columns: 1fr 2fr; } } /* Kwa simu janja */ @media (max-width: 480px) { .container { grid-template-columns: 1fr; } }

Muhimu: Fanya majaribio ya Grid kwenye mradi wako wa sasa. Anza na miundo rahisi na polepole ongeza utando wake.

©𝐍𝐚𝐬𝐬𝐢𝐫 𝐜𝐞𝐨 2023 Mafunzo ya CSS | Sehemu ya Tatu: CSS Grid na Upangaji wa Mitandao

Sehemu inayofuata: Mikondo na Mageuzi (Transitions & Transforms)