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:

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

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