如何收缩-包装一个css网格？

Question

假设网格布局如下：

null

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>

null

我想‘收缩包装’网格项，这样

1）网格的最大宽度将仅与内容一样宽，但

2）如果没有足够的空间容纳内容-项目将相应地包装。

在上面的演示中，第一个约束失败了--网格列伸展以适应它们各自的内容，并且所有额外的视口宽度在列之间平分（添加）。

Codepen演示-（调整大小看看我在说什么）

我尝试了几种方法来解决这一问题，但它们都将网格项“收缩包装”成与实际网格本身相对应的方式：

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

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

null

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>

null

2）在网格容器上设置justify-content：flex-start；

null

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>

null

3）添加一个伪造的第3列，该列用一个空的第3列填充剩余的视区宽度：

grid-template-columns: auto auto 1fr;

null

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>

null

那么我该如何“收缩”网格呢？

Answer 1

在元素上设置display:grid会使其生成块级网格容器框。

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

在这种情况下，我们可以通过在网格容器上设置以下内容之一来阻止网格的拉伸：

1）显示：内联网格；

null

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>