Загрузка...Сетка разбита на 12 ячеек в ряду, где вы можете равномерно размещать области на дорожках.
Классическая сетка из 12 колонок. Такую сетку можно быстро написать с помощью CSS-функции repeat(). Например использование: repeat(12, 1fr); реализует сетку из 12 ячеек в ряду по 1fr каждая.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}Теперь, можно размещать дочерние элементы в этой сетке ячеек из 12 колонок. Один из способов сделать это — размещать их построчно, например, grid-column: 1 / 13 займёт весь ряд от первой ячейки до последней (13-й) и объединит 12 колонок. А grid-column: 1 / 5; объединит первые четыре ячейки в ряду.
Ещё один способ написать то же самое — использовать ключевое слово span. С помощью span можно установить начальную ячейку ряда, а затем количество ячеек, которые нужно объединить из этой начальной точки. Тогда grid-column: 1 / span 12 будет эквивалентно grid-column: 1 / 13, а grid-column: 2 / span 6 будет эквивалентно grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}