不跨越整个网格的中心列[重复]

Question

此问题已经在这里有了答案：

Aligning grid items across the entire row/column (like flex items can) （2个答案）

Areas covered by Flexbox which are difficult or impossible to achieve with Grid （3个答案）

[<3个月前关闭。

我有一个由12列组成的网格，它的子列各跨越2列。但是，列数是可变的，因此有时会有一个完整的网格，即6列，有时只有一个部分网格，即2列。在这种情况下，我可以集中所有存在的列吗？

完整网格

<div class="grid">
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

部分网格

<div class="grid">
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.col {
  grid-column: span 2/span 2;
  // How can we centralise when less than a full grid?
}

Answer 1

只需确保子网格的grid-column跨度等于父网格的列。

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid2{
  border: solid 1px dodgerblue;
  grid-template-columns: 1fr 1fr 1fr;
}

.fullgrid{
  grid-column: 1/4; 
}

.grid1 > div{
  border: solid 1px orangered;
}

<div class="grid grid1">
  <div>1</div>
  <div>2</div>
  <div class="fullgrid">
    <div class="grid grid2">
        <div>3.1</div>
        <div>3.2</div>
        <div>3.3</div>
    </div>
  </div>
  <div>4</div>
  <div>4</div>
</div>