如何收缩包装CSS网格？

Question

假设如下网格布局：

div {
  display: grid;
  grid-template-columns: auto auto;
  grid-row-gap: 1em;
  border: 5px solid green;
  margin: 50px;
}
h3 {
  grid-column: 1 / -1;
  margin: 0;
}
span {
  background-color: pink;
}
h3, span {
  padding: 0.5em;
}
span + span {
  background-color: salmon;
}

<div>
  <h3>1. A heading here</h3>
  <span>some text here</span>
  <span>some  more text here as well thanks</span>
</div>

我想“收缩包装”网格项目，以便

1) 网格的最大宽度只会和内容一样宽，但是

2) 如果没有足够的空间容纳内容 - 项目将相应地换行。

在上面的演示中，first 约束失败 - 网格列拉伸以适应它们各自的内容，并且所有 extra 视口宽度在列。

Codepen demo - （调整大小以查看我在说什么）

我尝试了几种方法来解决这个问题，但它们都将网格项目“收缩包装”到实际网格本身：

1) 将max-content设置为轨道长度，而不是auto

grid-template-columns: max-content max-content;

div {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-row-gap: 1em;
  border: 5px solid green;
  margin: 50px; 
}
h3 {
  grid-column: 1 / -1;
  margin: 0;
}
span {
  background-color: pink;
}
h3, span {
  padding: 0.5em;
}
span + span {
  background-color: salmon;
}

<div>
  <h3>1. A heading here</h3>
  <span>some text here</span>
  <span>some text here</span>
</div>

2) 在网格容器上设置justify-content: flex-start;

div {
  display: grid;
  grid-template-columns: auto auto;
  grid-row-gap: 1em;
  border: 5px solid green;
  margin: 50px; 
  justify-content: flex-start;
}
h3 {
  grid-column: 1 / -1;
  margin: 0;
}
span {
  background-color: pink;
}
h3, span {
  padding: 0.5em;
}
span + span {
  background-color: salmon;
}

<div>
  <h3>1. A heading here</h3>
  <span>some text here</span>
  <span>some text here</span>
</div>

3) 添加一个虚假的第三列，用空的第三列填充剩余的视口宽度：

grid-template-columns: auto auto 1fr;

div {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-row-gap: 1em;
  border: 5px solid green;
  margin: 50px; 
}
h3 {
  grid-column: 1 / -1;
  margin: 0;
}
span {
  background-color: pink;
}
h3, span {
  padding: 0.5em;
}
span + span {
  background-color: salmon;
}

<div>
  <h3>1. A heading here</h3>
  <span>some text here</span>
  <span>some text here</span>
</div>

那么我将如何“收缩包装”网格？

Answer 1

在一个元素上设置display: grid 会导致它生成一个块级网格容器框。

这就是导致网格填充视口宽度并相应地拉伸项目的原因。

既然如此，我们可以通过在网格容器上设置以下一项来阻止网格拉伸：

1)display: inline-grid;

div {
  display: inline-grid; /* <-- modified */
  grid-template-columns: auto auto;
  grid-row-gap: 1em;
  border: 5px solid green;
  margin: 50px;
}
h3 {
  grid-column: 1 / -1;
  margin: 0;
}
span {
  background-color: pink;
}
h3, span {
  padding: 0.5em;
}
span + span {
  background-color: salmon;
}

<div>
  <h3>1. A heading here</h3>
  <span>some text here</span>
  <span>some text here</span>
</div>

2) float: left; /* or right */

div {
  display: grid;
  float: left; /* <-- added */
  grid-template-columns: auto auto;
  grid-row-gap: 1em;
  border: 5px solid green;
  margin: 50px;
}
h3 {
  grid-column: 1 / -1;
  margin: 0;
}
span {
  background-color: pink;
}
h3, span {
  padding: 0.5em;
}
span + span {
  background-color: salmon;
}

<div>
  <h3>1. A heading here</h3>
  <span>some text here</span>
  <span>some text here</span>
</div>

3)position: absolute;

div {
  display: grid;
  position: absolute; /* <--- added */
  grid-template-columns: auto auto;
  grid-row-gap: 1em;
  border: 5px solid green;
  margin: 50px;
}
h3 {
  grid-column: 1 / -1;
  margin: 0;
}
span {
  background-color: pink;
}
h3, span {
  padding: 0.5em;
}
span + span {
  background-color: salmon;
}

<div>
  <h3>1. A heading here</h3>
  <span>some text here</span>
  <span>some text here</span>
</div>

或者，我们可以在网格容器上设置width: fit-content。

div {
  display: grid;
  grid-template-columns: auto auto;
  grid-row-gap: 1em;
  border: 5px solid green;
  margin: 50px; 
  width: fit-content; /* <-- added */
}
h3 {
  grid-column: 1 / -1;
  margin: 0;
}
span {
  background-color: pink;
}
h3, span {
  padding: 0.5em;
}
span + span {
  background-color: salmon;
}

<div>
  <h3>1. A heading here</h3>
  <span>some text here</span>
  <span>some text here</span>
</div>