Увод у CSS Grid

CSS Grid представља начин да се елементи позиционирају истовремено и хоризонтално и вертикално. Ово је напреднији начин у поређењу са флекс боксовима, али је сложенији за савладавање.

Да бисте направили грид, потребно је елементу задати својство display са вредношћу grid:

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

#parent {
	display: grid;
}

Након тога, елемент се претвара у дводимензионалну мрежу, у којој се елементи позиционирају по вертикали (колоне) и хоризонтали (редови). Простор на пресеку колоне и реда назива се ћелијом.

Помоћу специјалних својстава биће могуће позиционирати елементе и по редовима, и по колонама. То ће омогућити лако прављење, на пример, оваквих ствари:

У следећим лекцијама прво ћемо проучити позиционирање елемената по колонама, затим ћемо прећи на учење редова, а након тога ћемо све то спојити заједно.