2

Допустимо ли применять к одному блоку сразу 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;
}
3
  • Да, можно. Это и есть вопрос? 3 фев 2019 в 12:54
  • @VadimOvchinnikov похоже даже grid-column указывать необязательно, достаточно grid-template-columns. Верно? 6 фев 2019 в 20:39
  • Сейчас напишу вам полноценный ответ. 6 фев 2019 в 20:40

1 ответ 1

2

Да, так делать можно. Надеюсь вы понимаете, что в гриде есть грид-контейнер (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.

1
  • 1
    Относительно непосредственных детей можно сделать оговорку насчёт display: contents
    – Qwertiy
    6 фев 2019 в 22:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.