CSS Grid -johdanto
CSS-gridit tarjoavat tavan sijoittaa elementtejä samanaikaisesti sekä vaakasuunnassa että pystysuunnassa. Tämä on kehittyneempi tapa verrattuna flexboxeihin, mutta vaikeampi hallita.
Luodaksesi gridin, aseta elementin
display-ominaisuuden
arvoksi grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Tämän jälkeen elementistä tulee kaksiulotteinen verkko, jossa elementit sijoitetaan pystysuunnassa (sarakkeet) ja vaakasuunnassa (rivit). Aluetta, jossa sarake ja rivi leikkaavat, kutsutaan soluksi.
Erikoisominaisuuksien avulla voit sijoittaa elementtejä sekä riveille että sarakkeille. Tämän avulla voit helposti luoda esimerkiksi tällaisia asioita:
Seuraavissa oppitunneissa opimme ensin elementtien sijoittamista sarakkeisiin, sitten siirrymme oppimaan riveistä ja sen jälkeen yhdistämme kaiken yhteen.
