假设以下网格布局：
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>
我想收缩包装＆＃39;
1）网格的最大宽度仅与内容一样宽，但
2）如果内容空间不足 - 项目会相应地换行。
在上面的演示中，第一个约束失败 - 网格列拉伸以适合各自的内容，并且所有额外视口宽度在两者之间平均分配（添加）列。
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）添加一个伪造的第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>
那么我将如何＆＃39;收缩包装＆＃39;网格？
答案 0 :(得分：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>