Uvod v CSS mreže

CSS mreže predstavljajo način za postavitev elementov hkrati vodoravno in navpično. To je naprednejši način v primerjavi s fleksi, vendar bolj zapleten za obvladovanje.

Če želite ustvariti mrežo, morate nastaviti lastnost display elementa na vrednost grid:

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

css#parent {
  display: grid;
}

Po tem se element spremeni v dvodimenzionalno mrežo, v kateri so elementi razporejeni navpično (stolpci) in vodoravno (vrstice). Območje na presečišču stolpca in vrstice se imenuje celica.

S posebnimi lastnostmi lahko postavljamo elemente po vrsticah in stolpcih. To bo omogočilo enostavno ustvarjanje, na primer, takšnih stvari:

V naslednjih lekcijah bomo najprej preučili postavitev elementov po stolpcih, nato pa prešli k preučevanju vrstic, in na koncu vse to združili skupaj.