Я думаю, что назвал области сетки в сетках CSS как принести собственный синтаксический сахар. Вы им абсолютно не нужны (вы можете выразить размещение сетки другими способами), но это может сделать это размещение более интуитивно понятным. И, эй, если я ошибаюсь, исправьте меня в комментариях.
Предположим, вы создали сетку с тремя столбцами:
.grid {
отображение: сетка;
сетчатый зазор: 1rem;
Сетка-шаблон-столбцы:
200px 1fr 1fr;
}
Никаких рядов, определенных там; они неявные и появятся по мере необходимости. Мы могли бы определить их, мы просто этого не делаем, потому что, как и большинство ситуаций в веб-дизайне, нам все равно, насколько высоки элементы: высота будет расти по мере необходимости, чтобы разместить контент.
Теперь, как мы помещаем что-то в эту самую верхнюю левую позицию в сетке? Мы могли бы сказать, что сетка будет размещена так:
.item {
grid-column: 1/2; / * начинаются с первой строки столбца сетки и заканчиваются на второй * /
}
Это работает, хотя .item лучше быть первым ребенком .grid . В противном случае там может быть помещено что-то еще, и .item ударит в следующую открытую строку. Если бы мы хотели быть уверенными, что поместим его в верхнем левом углу, мы также сможем сделать ряд:
.item {
grid-column: 1/2;
строка сетки: 1/2;
}
Теперь он будет в левом верхнем углу, даже если там размещены другие предметы (они просто перекрываются). Мы можем даже сократить расходы на имущество в сетке :
.item {
площадь сетки: 1/1/2/2;
}
Все эти 1 и 2 могут быть достаточно интуитивными на данный момент, но цифры становятся немного в более сложных сетках, включающих размещение столбцов и строк.
Проверьте это. Хотя мы определяем столбцы, мы можем назвать их отдельным свойством:
.grid {
отображение: сетка;
сетчатый зазор: 1rem;
Сетка-шаблон-столбцы:
200px 1fr 1fr;
Сетка-шаблон-направления:
"pro a b"
«pro c d»;
}
Каждая цитированная группа в сетке-шаблонных областях представляет собой строку. Внутри есть имена, которые я только что нарисовал. Может быть, почти все, если это имеет смысл для вас. Посмотрите, как слово «pro» повторяется дважды на двух строках? Это важно, так как это говорит о том, что мы можем разместить элемент сетки, где это значение «pro» есть, и оно будет в первом из трех столбцов и будет охватывать две строки. Довольно интуитивно, да?
Мы разместим его вот так:
.pro-features {
/* скорее, чем */
площадь сетки: 1/1/2/3;
/ * теперь мы можем сделать * /
grid-area: pro;
}
Вот такой простой пример:
См. «Простые именные области пера», написанные Крисом Койером (@chriscoyier) на CodePen.
Хотите получить еще более описательную информацию с помощью сетки? Попробуйте рисовать его в комментариях к CSS.
Загрузка...
