# Введение в CSS гриды

CSS гриды представляют собой способ разместить элементы одновременно и по горизонтали, и по вертикали. Это более продвинутый способ по сравнению с флексами, но более сложный для освоения.

Чтобы сделать грид, нужно задать элементу свойство `display` в значении `grid`:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; }`

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

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

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

← →
↑