Hordhac ku saabsan Grid-ka CSS

Grid-ka CSS waa hab awood leh oo loo isticmaalo in lagu abuuro layout-yo laba-geesood ah oo ku yaal bogagga shabakadda. Waxay noo ogolaataa inaan xakameyno booska iyo cabbirka walxaha si hufan.

Faa'iidooyinka Grid-ka CSS

• Layout-yo adag: Waxaad abuuri kartaa layout-yo adag oo aan suurtogal ahayn adigoo isticmaalaya habab kale.
• Xakamaynta booska: Waxaad si sax ah u xakamayn kartaa booska walxaha.
• Responsive design: Grid-ka wuxuu si fiican ula qabsan karaa cabbirrada shaashadaha kala duwan.

Aasaaska Grid-ka

Grid-ka wuxuu ka kooban yahay:

• Grid container: Walaxda waalidka oo ay ku jiraan walxaha grid-ka.
• Grid items: Walxaha carruurta ee ku jira grid container-ka.
• Grid lines: Khadadka toosan iyo kuwa jiifka ah ee sameeya qaab-dhismeedka grid-ka.
• Grid tracks: Meelaha u dhexeeya laba xariiq oo grid ah (tiirar iyo safaf).
• Grid cells: Meelaha ay ku yaalaan isgoysyada tiirarka iyo safafka.

Tusaale Aasaasi ah

Halkan waxaa ah tusaale aasaasi ah oo ku saabsan sida loo abuuro grid container:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

CSS-ka:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}

Sharaxaada

• display: grid;: Waxay u sheegaysaa browser-ka inaan isticmaaleyno grid layout.
• grid-template-columns: auto auto auto;: Waxay qeexaysaa saddex tiir, mid walbana cabbirkiisu yahay auto.

Gunaanad

Kani waa hordhac kooban oo ku saabsan Grid-ka CSS. Barashada Grid-ka waxay ku siinaysaa awood aad ku abuuri karto layout-yo shabakadeed oo adag oo responsive ah.