предотвратить расширение столбцов минимального содержимого

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 увеличивается, хотя не должна. Так как span-span охватывает 3 элемента, он должен допускать содержимое до 500px, а затем разрываться (или переполняться). Тот же эффект может быть достигнут с фиксированной шириной (см. Jsfiddle).

Я что-то не так делаю или это ошибка? Нужно ли удалять длинные слова из моей сетки?

https://jsfiddle.net/156y0ajv/

edit: после некоторого тестирования я обнаружил, что применение следующего решит проблему. Но это все еще выглядит для меня как ошибка.

.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 принимает длину контейнера и равномерно распределяет это пространство по дорожкам 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 решение

Если ваша цель min-content для столбцов 1 и 2, вам не нужно auto для столбца 3. На самом деле, вам даже не нужно 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