如何收缩包装 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)如果没有足够的空间容纳内容 - 项目将相应地包装。

在上面的演示中，第一个约束失败 - 网格列拉伸以适应其各自的内容，并且所有额外的视口宽度在列之间平均拆分(添加)。

代码笔演示- (调整大小以查看我在说什么)

我已经尝试了几种方法来解决此问题，但它们都"收缩包装"了与实际网格本身相关的网格项目：

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>