Сетка разбита на 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;
}