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:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#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.