Question

假设以下网格布局：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

我想收缩包装＆＃39;

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

2）如果内容空间不足 - 项目会相应地换行。

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

Codepen demo - （调整大小以查看我正在谈论的内容）

我已经尝试了一些方法来解决这个问题，但他们都采用了缩小方法来解决这个问题。网格项与实际网格本身相关：

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

3）添加一个伪造的第3列，用剩下的第三列填充剩余的视口宽度：

grid-template-columns: auto auto 1fr;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

那么我将如何＆＃39;收缩包装＆＃39;网格？

Answer 1

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

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

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

1）display: inline-grid;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

3）position: absolute;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何收缩包装css网格？

1 个答案: