Ievads CSS Grid
CSS Grid ir veids, kā izvietot elementus vienlaikus gan horizontāli, gan vertikāli. Šis ir progresīvāks veids salīdzinājumā ar Flexbox, bet sarežģītāks apgūšanā.
Lai izveidotu Grid, elementam jāiestata
īpašība display
ar vērtību grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Pēc tam elements pārvērtīsies par divdimensiju režģi, kurā elementi tiek izvietoti vertikāli (kolonnas) un horizontāli (rindas). Apgabals kolonnas un rindas krustpunktā tiek saukts par šūnu.
Ar speciālu īpašību palīdzību varēs izvietot elementus gan pa rindām, gan pa kolonnām. Tas ļaus viegli izveidot, piemēram, šādas lietas:
Nākamajās nodarbībās mēs vispirms apgūsim elementu izvietošanu pa kolonnām, tad pāriesim pie rindu apguves, un pēc tam apvienosim to visu kopā.
