Введение в 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;
}

После этого элемент превратится в двумерную сетку, в которой элементы располагаются по вертикали (столбцы) и горизонтали (ряды). Область при пересечении столбца и ряда называется ячейкой.

С помощью специальных свойств можно будет размещать элементы и по рядам, и по колонкам. Это позволит легко делать, например, вот такие штуки:

В следующих уроках мы сначала изучим размещение элементов по столбцам, затем перейдем к изучению рядов, а после объединим все это вместе.