Увод у CSS Grid

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

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

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

css#parent {
  display: grid;
}

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

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

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