grid-template-columns и grid-column

155

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.