Въведение в CSS гридове

CSS гридовете представляват начин за разполагане на елементи едновременно хоризонтално и вертикално. Това е по-напреднал метод в сравнение с флексбоксите, но е по- сложен за овладяване.

За да създадете грид, трябва да зададете на елемента свойството display със стойност grid:

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

css#parent {
  display: grid;
}

След това елементът се превръща в двумерна мрежа, в която елементите се разполагат вертикално (колони) и хоризонтално (редове). Областта при пресичане на колона и ред се нарича клетка.

С помощта на специални свойства може да се разполагат елементи и по редове, и по колони. Това ще позволи лесно да се създават, например, такива неща:

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