Utangulizi wa CSS Grid
CSS Grid ni njia ya kuweka vipengele wakati huo huo kwa usawa, na kwa wima. Hii ni njia ya hali ya juu ikilinganishwa na fleksi, lakini ina ugumu zaidi kufahamu.
Ili kutengeneza grid, unahitaji kuweka
sifa display
kwa thamani grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Baada ya hayo, kipengele kitageuka kuwa wavu wa pande mbili ambapo vipengele vinawekwa kwa wima (safu wima) na usawa (safu mlalo). Eneo la makutano ya safu wima na safu mlalo inaitwa kiini.
Kwa kutumia sifa maalum unaweza kuweka vipengele kwa safu mlalo, na kwa safu wima. Hii itaruhusu kwa urahisi kutengeneza, kwa mfano, vitu kama hivi:
Katika masomo yafuatayo kwanza tutajifunza uwekaji wa vipengele kwa safu wima, kisha tutaendelea kujifunza safu mlalo, na baada ya hayo tutaunganisha yote pamoja.
