CSS Gridi tutvustus
CSS gridid on viis elementide paigutamiseks korraga nii horisontaalselt kui ka vertikaalselt. See on täiustatum viis võrreldes flexboxidega, kuid keerulisem omandada.
Gridi loomiseks tuleb elemendile määrata
omadus display
väärtusega grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Pärast seda muutub element kahemõõtmeliseks ruudustikuks, kus elemendid paiknevad vertikaalselt (veerud) ja horisontaalselt (read). Ala veeru ja rea ristumiskohas nimetatakse rakuks.
Spetsiaalsete omaduste abil saab paigutada elemente nii ridade kui ka veergude kaupa. See võimaldab hõlpsalt teha näiteks selliseid asju:
Järgmistes õppetükides me kõigepealt uurime elementide paigutamist veergude kaupa, seejärel liigume edasi ridade uurimisele ja pärast ühendame kõik selle kokku.
