html - 防止最小内容列扩展

Question

我有一个包含以下列的 CSS 网格:

.grid {
   width: 500px;
   display: grid;
   grid-template-columns: min-content min-content auto;
}

.item-span {
  grid-column: 1 / -1;
  // Same result width
  // grid-columns: span 3;
}

在我的网格中:

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="item-span">
       Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz
    </div>
</div>

问题:1/2/3 的宽度变大了，尽管它们不应该变大。由于 item-span 跨越 3 个元素，它应该允许内容最多 500px，然后中断(或溢出)。使用固定宽度可以实现相同的效果(参见 jsfiddle)。

我做错了什么还是这是一个错误？我需要从网格中删除长单词吗？

https://jsfiddle.net/156y0ajv/

编辑:经过一些测试，我发现应用以下内容可以解决问题。但对我来说它仍然像个错误。

.item-span {
    grid-column: 1 / -1;
    // Same result width
    // grid-columns: span 3;
    min-width: 100%;
    width: 0;
}

.grid {
  width: 500px;
  display: grid;
  grid-template-columns: min-content min-content auto;
}

.item {

}

.item-span {
  color: #3a843a;
  grid-column: 1 / -1;
}

.text {
    padding: 12px;
  white-space: nowrap;
}

<div class="grid">
  <div class="item"><span class="text">item 1</span></div>
  <div class="item"><span class="text">item 2</span></div>
  <div class="item"><span class="text">item 3</span></div>
  <div class="item"><span class="text">item 4</span></div>
  <div class="item"><span class="text">item 5</span></div>
  <div class="item"><span class="text">item 6</span></div>
  <div class="item-span">A short text does not break layout.</div>
  <div class="item"><span class="text">item 1</span></div>
  <div class="item"><span class="text">item 2</span></div>
  <div class="item"><span class="text">item 3</span></div>
  <div class="item-span">But when a german word is too long, the first and second column are bigger than their min-content.</div>
  <div class="item-span" style="color:#bf1717;">Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</div>
  
  <div class="item-span">Try adding display:none to the upper span.</div>
  <div class="item-span" style="color:#bf1717;"><div style="width: 250px">Similarly: fixed width cause the same issue</div></div>
  <div class="item-span"><div style="width: 20%">But for some reason: % width works perfectly.</div></div>
  <div class="item-span"><div style="width: 150%">Even 150% works without breaking the widths!</div></div>
</div>

Answer 1

自动

auto 值采用容器的长度 并将该空间均匀分布在auto 轨道上。在此示例中，三列的宽度相等。它们一起占据了容器的整个宽度。

grid-template-columns: auto auto auto

.grid {
  width: 500px;
  display: grid;
  grid-template-columns: auto auto auto;
  border: 1px solid black;
  background-color: black;
  grid-gap: 1px;
}

.item-span {
  /* display: none; */  /*  toggle this */
  background-color: white;
  color: #3a843a;
  grid-column: 1 / -1;
}

.text {
  padding: 5px;
  white-space: nowrap;
}

.item {
  background-color: white;
}

<div class="grid">
  <div class="item"><span class="text">item 1</span></div>
  <div class="item"><span class="text">item 2</span></div>
  <div class="item"><span class="text">item 3</span></div>
  <div class="item"><span class="text">item 4</span></div>
  <div class="item"><span class="text">item 5</span></div>
  <div class="item"><span class="text">item 6</span></div>
  <div class="item"><span class="text">item 1</span></div>
  <div class="item"><span class="text">item 2</span></div>
  <div class="item"><span class="text">item 3</span></div>
  <div class="item-span" style="color:#bf1717;">Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</div>
</div>

---

最小内容

min-content 值采用内容的长度 并将该空间均匀分布在min-content 轨道上。在此示例中，三列的宽度相等。它们一起占据了内容的整个宽度。

grid-template-columns: min-content min-content min-content

.grid {
  width: 500px;
  display: grid;
  grid-template-columns: min-content min-content min-content;
  border: 1px solid black;
  background-color: black;
  grid-gap: 1px;
}

.item-span {
  /* display: none; */ /*  toggle this */
  background-color: white;
  color: #3a843a;
  grid-column: 1 / -1;
}

.text {
  padding: 5px;
  white-space: nowrap;
}

.item {
  background-color: white;
}

<div class="grid">
  <div class="item"><span class="text">item 1</span></div>
  <div class="item"><span class="text">item 2</span></div>
  <div class="item"><span class="text">item 3</span></div>
  <div class="item"><span class="text">item 4</span></div>
  <div class="item"><span class="text">item 5</span></div>
  <div class="item"><span class="text">item 6</span></div>
  <div class="item"><span class="text">item 1</span></div>
  <div class="item"><span class="text">item 2</span></div>
  <div class="item"><span class="text">item 3</span></div>
  <div class="item-span" style="color:#bf1717;">Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</div>
</div>

---

auto 和 min-content

当您将这些值混合在一起时(就像在您的代码中一样)，您会得到看似任意的长度组合。但是，它们没有任何随意性。计算基于网格算法。 (参见网格规范中的 7.2、11.3 和 11.8 部分。)

grid-template-columns: min-content min-content auto

.grid {
  width: 500px;
  display: grid;
  grid-template-columns: min-content min-content auto;
  border: 1px solid black;
  background-color: black;
  grid-gap: 1px;
}

.item-span {
  /* display: none; */ /*  toggle this */
  background-color: white;
  color: #3a843a;
  grid-column: 1 / -1;
}

.text {
  padding: 5px;
  white-space: nowrap;
}

.item {
  background-color: white;
}

<div class="grid">
  <div class="item"><span class="text">item 1</span></div>
  <div class="item"><span class="text">item 2</span></div>
  <div class="item"><span class="text">item 3</span></div>
  <div class="item"><span class="text">item 4</span></div>
  <div class="item"><span class="text">item 5</span></div>
  <div class="item"><span class="text">item 6</span></div>
  <div class="item"><span class="text">item 1</span></div>
  <div class="item"><span class="text">item 2</span></div>
  <div class="item"><span class="text">item 3</span></div>
  <div class="item-span" style="color:#bf1717;">Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</div>
</div>

---

1fr 解决方案

如果您的目标是第 1 列和第 2 列的 min-content，则第 3 列不需要 auto。实际上，您甚至不需要 最小内容。

将第 3 列设置为 1fr，这将消耗该行的所有可用空间，从第 1 列和第 2 列中挤出所有额外空间。

这样做会:

grid-template-columns: min-content min-content 1fr;

这也是:

grid-template-columns: auto auto 1fr;

.grid {
  width: 500px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  border: 1px solid black;
  background-color: black;
  grid-gap: 1px;
}

.item-span {
  /* display: none; */ /*  toggle this */
  background-color: white;
  color: #3a843a;
  grid-column: 1 / -1;
}

.text {
  padding: 5px;
  white-space: nowrap;
}

.item {
  background-color: white;
}

<div class="grid">
  <div class="item"><span class="text">item 1</span></div>
  <div class="item"><span class="text">item 2</span></div>
  <div class="item"><span class="text">item 3</span></div>
  <div class="item"><span class="text">item 4</span></div>
  <div class="item"><span class="text">item 5</span></div>
  <div class="item"><span class="text">item 6</span></div>
  <div class="item"><span class="text">item 1</span></div>
  <div class="item"><span class="text">item 2</span></div>
  <div class="item"><span class="text">item 3</span></div>
  <div class="item-span" style="color:#bf1717;">Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz</div>
</div>

jsFiddle demo