grid-template-columns и grid-column

101
15 сентября 2019, 06:00

Допустимо ли применять к одному блоку сразу display: grid, grid-template-columns и grid-column?

Пример:

.product {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
// Можно ли делать вот так?
.product > .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column: span 1;
}
.product > .gallery > img:nth-child(1) {
    grid-column: span 4;
}
.product > .gallery > img {
    grid-column: span 1;
}
Answer 1

Да, так делать можно. Надеюсь вы понимаете, что в гриде есть грид-контейнер (grid container) и его непосредственные дочерние элементы (grid items). CSS свойства принадлежат либо к группе свойств контейнера, которые будут работать только на грид-контейнерах (элементах со свойством display: grid), либо к свойствам дочерних элементов и будут применяться только к "деткам". Если у элемента нет свойства display: grid, то свойства контейнера будут игнорироваться, если у непосредственного родителя нет свойства display: grid, то свойства родителей будут игнорироваться.

Сами элементы грида (grid items), могут быть и вложенным грид-контейнером (grid container).
Указывая свойства display: grid мы делаем элемент грид-контейнером и его непосредственные дочерние элементы становятся элементами грида (grid items), но эти дочерние элементы также могут быть грид-контейнерами.

Свойства grid-template-columns и grid-column очень разные, поэтому их можно применять вместе. grid-template-columns можно применять только к контейнерам и говорит о том в какие колонки надо помещать "деток" и работает только для непосредственных деток. Свойство grid-column можно применять только к "деткам" и будет работать только указывая явно колонку "ребёнка" относительно родителя и/или кол-во занимаемых колонок.

Как это будет работать в данном случае?

  • display: grid делает и .product, и .gallery грид-контейнерами, при этом .gallery будет вложенным.

  • grid-template-columns задаёт наличие колонок для "деток", то есть .product будет содержать две колонки, а .gallery — четыре, но это, как ожидается, отразиться только на детках.

  • grid-column задаёт позицию элемента отностильно контейнера и/или, для .gallery будет рассчитываться относительно .product, для элементов img относительно .gallery. Вообще значение grid-column: span 1, возможно, что довольно бесполезно, так как оно задаёт позицию по умолчанию, а элементы и так по умолчанию занимают одну колонку. Есть хотите обнулить любое свойство, то есть глобальное значение initial.

READ ALSO
Строка SVG не отображается внутри clipPath
CSS

Строка SVG не отображается внутри clipPath

У меня есть следующий Codepen , где я пытаюсь анимировать строку круга вокруг изображения

 89
Вызов функции после закрытия окна
javascript

Вызов функции после закрытия окна

Имеется окно загрузки файла, которое вызывается с помощью input'аПри нажатии, всплывает окно проводника

 88
Прокомментируйте работу функции bind()
javascript

Прокомментируйте работу функции bind()

 110
Как у функции javascript может быть свой метод, как у объекта?
javascript

Как у функции javascript может быть свой метод, как у объекта?

Я недавно наткнулся на данный код и не могу понять, как это работаетПодскажите, пожалуйста

 101