Inleiding tot CSS-roosters
CSS-roosters is 'n manier om elemente gelyktydig horisontaal en vertikaal te plaas. Dit is 'n meer gevorderde metode in vergelyking met fleks, maar meer ingewikkeld om te bemeester.
Om 'n rooster te maak, moet jy die display-eienskap van 'n element op die waarde grid stel:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Daarna sal die element omskep word in 'n tweedimensionele raster waar elemente volgens vertikale (kolomme) en horisontale (rye) geplaas word. Die gebied by die kruising van 'n kolom en 'n ry word 'n sel genoem.
Met behulp van spesiale eienskappe sal dit moontlik wees om elemente volgens beide rye en kolomme te plaas. Dit sal dit maklik maak om byvoorbeeld sulke dinge te doen:
In die volgende lesse sal ons eers die plasing van elemente volgens kolomme bestudeer, dan sal ons oorgaan na die studie van rye, en daarna sal ons alles saamvoeg.
