阻止最小内容列扩展

时间：2018-11-07 14:29:27

标签： html css css3 css-grid

我有一个带有以下列的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>

1 个答案:

答案 0 :(得分：1)

auto

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值采用内容的长度，并将该空间均匀地分布在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。实际上，您甚至根本不需要min-content。

将第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

相关问题
最新问题