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