Uvod u CSS Grid
CSS Grid predstavlja način da se elementi pozicioniraju istovremeno i horizontalno i vertikalno. Ovo je napredniji način u poređenju sa flexbox-om, ali komplikovaniji za savladavanje.
Da biste napravili grid, potrebno je da elementu
postavite svojstvo display
na vrednost grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Nakon toga, element će se pretvoriti u dvodimenzionalnu mrežu, u kojoj su elementi raspoređeni vertikalno (kolone) i horizontalno (redovi). Prostor na preseku kolone i reda se naziva ćelijom.
Pomoću posebnih svojstava moći ćete da pozicionirate elemente i po redovima, i po kolonama. Ovo će omogućiti lako pravljenje, na primer, ovakvih stvari:
U narednim lekcijama, prvo ćemo proučiti pozicioniranje elemenata po kolonama, zatim ćemo preći na proučavanje redova, a potom ćemo sve ovo spojiti zajedno.
