Вовед во CSS Grid

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

За да направите Grid, треба да поставите на елементот својството display со вредност grid:

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

css#parent {
  display: grid;
}

После ова, елементот ќе се претвори во дводимензионална мрежа, во која елементите се поставени вертикално (колони) и хоризонтално (редови). Областа на пресекот на колона и ред се нарекува клетка.

Со помош на специјални својства може да се поставуваат елементи и по редови, и по колони. Ова ќе овозможи лесно да се прават, на пример, вакви работи:

Во следните лекции прво ќе го проучуваме поставувањето на елементи по колони, потоа ќе преминеме на учење за редовите, а после сè ова ќе го комбинираме заедно.