display: grid
— это CSS-свойство, которое позволяет создавать сетку из элементов, расположенных в рядах и столбцах, для создания сложных макетов веб-страниц. Оно определяет контейнер, который будет использоваться для создания адаптивной сетки с помощью строк и столбцов.
Чтобы использовать display: grid
, нужно сначала определить контейнер-родитель, на котором будет использоваться данное свойство. Затем нужно задать свойства grid-template-columns
и grid-template-rows
, чтобы создать сетку из столбцов и строк соответственно.
Пример CSS-кода для создания сетки из трех столбцов и двух строк:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
Здесь 1fr
означает, что каждый столбец/строка должен занимать одну часть доступного места в контейнере.
Затем для дочерних элементов можно задавать их позицию в сетке с помощью свойств grid-row
и grid-column
, указывая номер соответствующей строки или столбца.
Например, чтобы элемент находился в третьем столбце и первой строке, можно использовать следующий CSS-код:
.item {
grid-row: 1;
grid-column: 3;
}
display: grid
дает широкие возможности для создания сложных макетов, которые могут изменяться в зависимости от размера экрана и устройства пользователя.