如何使用CSS网格分配列之间的水平空间

Question

我需要为一些数据创建一个类似表格的结构。一半的行需要分成列（图中的灰色），另一半只需要一列，该列应该跨越整个宽度。另外，宽行之后需要留有边距，这就是我不能使用

<table>

的主要原因。

在下面的代码片段中，我使用网格和

grid-template-columns: repeat(3, 1fr);

实现了我的目标。但是，只有当我有 3 个灰色列时它才有效。实际上，我事先并不知道宽行上方会有多少列。我正在寻找一种适用于动态数量的灰色列的解决方案（由标记中

div

的数量确定）。

我也尝试将

auto-fill

用于列模板，但它不会扩展灰色列以填充行的宽度。列受到给定 100px 值的约束。

如何使灰色列填充整行而不在 CSS 中指定列数？

.container {
  width: 100%;
  margin-bottom: 10px;
}

.row {
  display: grid;
  margin-bottom: 5px;
}

.row.static-repeat {  
  grid-template-columns: repeat(3, 1fr); 
}

.row.auto-fill {  
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
}

.cell {
  border: 1px solid black;
  background-color: lightgray;
}

.wide {
  grid-column: 1 / -1;
  background-color: wheat;
}

<div class="container">
  Three columns with static repeat:
  <div class="row static-repeat">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
    <div class="cell">
      Three
    </div>
    <div class="cell wide">
      Four (wide)
    </div>
  </div>
    <div class="row static-repeat">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
    <div class="cell">
      Three
    </div>
    <div class="cell wide">
      Four (wide)
    </div>
  </div>
</div>

<div class="container">
  Four columns with static repeat (all gray columns should be on the same row):
  <div class="row static-repeat">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
   <div class="cell">
      Three
    </div>
    <div class="cell">
      Four
    </div>
    <div class="cell wide">
      Five (wide)
    </div>
  </div>
    <div class="row static-repeat">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
   <div class="cell">
      Three
    </div>
    <div class="cell">
      Four
    </div>
    <div class="cell wide">
      Five (wide)
    </div>
  </div>
</div>

<div class="container">
  Three columns with auto-fill (should take the whole width):
  <div class="row auto-fill">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
    <div class="cell">
      Three
    </div>
    <div class="cell wide">
      Four (wide)
    </div>
  </div>
    <div class="row auto-fill">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
    <div class="cell">
      Three
    </div>
    <div class="cell wide">
      Four (wide)
    </div>
  </div>
</div>

<div class="container">
  Four columns with auto-fill (should take the whole width):
  <div class="row auto-fill">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
   <div class="cell">
      Three
    </div>
    <div class="cell">
      Four
    </div>
    <div class="cell wide">
      Five (wide)
    </div>
  </div>
    <div class="row auto-fill">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
   <div class="cell">
      Three
    </div>
    <div class="cell">
      Four
    </div>
    <div class="cell wide">
      Five (wide)
    </div>
  </div>
</div>

Answer 1

这是一项弹性工作

.container {
  margin-bottom: 10px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.cell {
  flex: 1;
  min-width: 0;
  background-color: lightgray;
  border: 1px solid black;
}

.wide {
  flex: 100%;
  background-color: wheat;
}

<div class="container">
  <div class="row static-repeat">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
    <div class="cell">
      Three
    </div>
    <div class="cell wide">
      Four (wide)
    </div>
  </div>
    <div class="row static-repeat">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
    <div class="cell">
      Three
    </div>
    <div class="cell wide">
      Four (wide)
    </div>
  </div>
</div>

<div class="container">
  <div class="row static-repeat">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
   <div class="cell">
      Three
    </div>
    <div class="cell">
      Four
    </div>
    <div class="cell wide">
      Five (wide)
    </div>
  </div>
    <div class="row static-repeat">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
   <div class="cell">
      Three
    </div>
    <div class="cell">
      Four
    </div>
    <div class="cell wide">
      Five (wide)
    </div>
  </div>
</div>

<div class="container">
  <div class="row auto-fill">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
    <div class="cell">
      Three
    </div>
    <div class="cell wide">
      Four (wide)
    </div>
  </div>
    <div class="row auto-fill">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
    <div class="cell">
      Three
    </div>
    <div class="cell wide">
      Four (wide)
    </div>
  </div>
</div>

<div class="container">
  <div class="row auto-fill">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
   <div class="cell">
      Three
    </div>
    <div class="cell">
      Four
    </div>
    <div class="cell wide">
      Five (wide)
    </div>
  </div>
    <div class="row auto-fill">
    <div class="cell">
      One
    </div>
    <div class="cell">
      Two
    </div>
   <div class="cell">
      Three
    </div>
    <div class="cell">
      Four
    </div>
    <div class="cell wide">
      Five (wide)
    </div>
  </div>
</div>

Answer 2

如果

grid

的使用不是强制性的，使用flex很容易实现：

p {
 display: flex;
 flex-wrap: wrap;
}
p > * {
 flex-grow: 1; /* fill unclaimed space */
 flex-basis: 0; /* disregard width of the content */
 outline: 1px solid;
 padding: 1em;
}
p > *:last-child {
 flex-basis: 100%; /* fullwidth */
}

<p>
 <span>a</span>
 <span>b</span>
 <span>c</span>
 <span>d</span>
 <span>wide</span>
</p>

<p>
 <span>a</span>
 <span>b</span>
 <span>c</span>
 <span>wide</span>
</p>

<p>
 <span>a</span>
 <span>bbbbbbbbbbb</span>
 <span>wide</span>
</p>

<p>
 <span>a</span>
 <span>b</span>
 <span>wide</span>
</p>