使用“显示：网格”使父级扩展到子级的宽度 [重复]答案

【问题标题】：Make parent expand to the width of child with "display: grid" [duplicate]使用“显示：网格”使父级扩展到子级的宽度 [重复]
【发布时间】：2019-09-04 18:34:25
【问题描述】：

编辑：不确定这是不是重复的？我不希望背景颜色超出容器的宽度，我希望容器扩展到其display: grid 子项的大小。更新了示例以更好地解释我的问题。

我正在构建一个表格，其中每一行都是一个 CSS 网格。我这样做是为了利用每个单元格的minmax()，使整个表格在其单元格不再缩小时可滚动，同时在有更多可用空间时允许表格增长。

除了行的样式仅适用于容器的宽度这一事实之外，这很好用。

请看这个例子：

.container {
  width: 430px;
  background: grey;
  overflow-x: scroll;
}

.row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
  background: red;
  height: 3rem;
  margin: 0.5rem;
}

.cell {
  border: 1px solid black;
}

Scroll to the right inside the box:
<div class="container">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
Elements with the <code>.row</code> class should expand to fit all the cells.

有没有办法解决这个问题？如果需要，我可以添加额外的元素！

【问题讨论】：

为什么不对行中的每个单元格使用红色背景？
在我的设计中，每一行都应该有渐变作为背景和边框半径。将样式设置为整行会更容易（如果可能）。

标签： html css css-grid

【解决方案1】：

将行的显示更改为inline-grid 似乎有帮助：

.container {
  width: 430px;
  background: grey;
  overflow-x: scroll;
}

.row {
  display: inline-grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
  background: red;
  height: 3rem;
}

.cell {
  border: 1px solid black;
}

Scroll to the right inside the box:
<div class="container">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
The red background should cover the whole row.

更新 1

为了避免宽容器/窄子在一行中出现问题（如上面的解决方案），您可以使用更复杂的解决方案，它在父级上使用 display: flex; flex-direction: column，并附加 align-items: start 来强制行项目具有全宽（与默认的 stretch 相反，这使得行宽不比容器宽）。

.container {
  width: 430px;
  background: grey;
  overflow-x: scroll;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.container.container-wide{
  width: 1000px;
}

.row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
  background: red;
  height: 3rem;
}

.cell {
  border: 1px solid black;
}

Scroll to the right inside the box:
<div class="container">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
Wide container:
<div class="container container-wide">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
The red background should cover the whole row.

更新 2

为了在行宽于所有列的总和的情况下允许将行拉伸到容器的整个宽度，可以通过将 display: flex 替换为 display: grid 来调整更新 1 中的解决方案，见下面的例子：

.container {
  width: 430px;
  background: grey;
  overflow-x: scroll;
  display: grid;
}

.container.container-wide{
  width: 1000px;
}

.row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(100px, 1fr);
  background: red;
  height: 3rem;
}

.cell {
  border: 1px solid black;
}

Scroll to the right inside the box:
<div class="container">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
Wide container:
<div class="container container-wide">
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
  <div class="row">
    <span class="cell">cell 1</span>
    <span class="cell">cell 2</span>
    <span class="cell">cell 3</span>
    <span class="cell">cell 4</span>
  </div>
</div>
The red background should cover the whole row.

【讨论】：

这样做的问题是，如果容器变得足够宽，行将彼此相邻。看到这个小提琴：jsfiddle.net/3n0ca6hy
添加了一个稍微不同的解决方案的更新，该解决方案不使用inline-*，而是使用display: flex 作为容器。
谢谢！但现在的问题是表格不会像没有align-items: start 那样扩展超出单元格的最小宽度。也许我想要达到的目标是不可能的。
我又解决了这个问题，请参阅我的更新。

【解决方案2】：

如果你需要用单元格宽度填充grid-template-columns，你应该尝试：

.row {
  display: grid;
  grid-template-columns: auto auto auto auto;
  background: red;
  height: 3rem;
}

对于每个单元格的 200px 宽度，只需添加：

.cell {
    min-width: 200px;
    border: 1px solid black;
}

【讨论】：