Введение в CSS гриды
CSS гриды представляют собой способ разместить элементы одновременно и по горизонтали, и по вертикали. Это более продвинутый способ по сравнению с флексами, но более сложный для освоения.
Чтобы сделать грид, нужно задать
элементу свойство display
в значении grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
После этого элемент превратится в двумерную сетку, в которой элементы располагаются по вертикали (столбцы) и горизонтали (ряды). Область при пересечении столбца и ряда называется ячейкой.
С помощью специальных свойств можно будет размещать элементы и по рядам, и по колонкам. Это позволит легко делать, например, вот такие штуки:
В следующих уроках мы сначала изучим размещение элементов по столбцам, затем перейдем к изучению рядов, а после объединим все это вместе.