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

【问题标题】：Center columns that do not span full grid [duplicate]不跨越整个网格的中心列[重复]
【发布时间】：2020-07-04 04:17:03
【问题描述】：

我有一个由 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?
}

【问题讨论】：

标签： html css grid css-grid centering

【解决方案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>

【讨论】：