Hyrje në CSS Grid

CSS Grid përfaqëson një mënyrë për të vendosur elementet njëkohësisht horizontalisht dhe vertikalisht. Kjo është një mënyrë më e avancuar krahasuar me flex, por më e vështirë për tu zotëruar.

Për të krijuar një grid, duhet t'i caktoni elementit vetinë display me vlerën grid:

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

css#parent {
  display: grid;
}

Pas kësaj, elementi do të kthehet në një rrjetë dy-dimensionale ku elementet vendosen vertikalisht (kolona) dhe horizontalisht (rreshta). Zona në kryqëzimin e një kolone dhe një rreshti quhet qelizë.

Me ndihmën e vetive të veçanta mund të vendosim elementet si sipas rreshtave, ashtu edhe sipas kolonave. Kjo do të lejojë të krijohen lehtësisht, për shembull, gjëra si kjo:

Në mësimet në vijim, së pari do të mësojmë vendosjen e elementeve sipas kolonave, pastaj do të kalojmë në mësimin e rreshtave, dhe pas kësaj do t'i kombinojmë të gjitha së bashku.