CSS Grid min-content не соответствует содержанию

Question

Я пытаюсь поместить некоторые элементы div в сетку, явно назначая элементам строки, столбцы и размеры и позволяя сетке CSS выполнять работу по определению размера столбцов и строк с помощью следующего CSS.

display: grid;
grid-auto-columns: min-content;

Предполагается, что значение min-content задает для столбцов минимально возможный размер, который соответствует содержимому без переполнения. Однако этого не происходит. Несмотря на то, что все эти элементы могут поместиться в сетку размером 350px, третий столбец слишком большой, что приводит к ненужным пробелам.

Вот изображение того, что происходит.

А вот актуальный код: JSFiddle

function randint(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const children = document.getElementById('parent').children;
const skip = 360 / children.length;
let value = randint(0, 359);
for (let i = 0; i < children.length; i += 1) {
  const elm = children[i];
  elm.style.backgroundColor = `hsl(${value}, 100%, 85%)`;
  value += skip;
  elm.id = "w" + (i + 1);
  const style = window.getComputedStyle(elm);
  elm.innerHTML = `width: ${elm.offsetWidth}px<br \>
  col: ${style.getPropertyValue('grid-column')}<br \>
  row: ${style.getPropertyValue('grid-row')}`;
}

#parent {
  display: grid;
  grid-auto-columns: min-content;
  border: 1px solid black;
  width: 350px;
  font-size: 10pt;
}

#parent>div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
}

#w1 {
  width: 200px;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

#w2 {
  width: 150px;
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

#w3 {
  width: 100px;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

#w4 {
  width: 150px;
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

#w5 {
  width: 100px;
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

<div id='parent'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

Элементы сетки в первом ряду создают четыре столбца:

#w1 {
  width: 200px;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

#w2 {
  width: 150px;
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

Первый элемент занимает два столбца (grid-column: 1 / 3).

Второй элемент занимает два столбца (grid-column: 3 / 5).

Итак, у вас есть сетка из 4 столбцов.

---

Chrome

В Chrome длины элементов сетки в первой строке делятся поровну между столбцами.

Итак, первые два столбца имеют ширину 100 пикселей:

А вторые две колонки имеют ширину 75px:

Теперь вы можете видеть, что происходит во втором ряду. Вот код:

#w3 {
  width: 100px;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

#w4 {
  width: 150px;
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

#w5 {
  width: 100px;
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

• Первый элемент (#w3) имеет ширину 100 пикселей. Это идеально вписывается в первый столбец, созданный #w1.

• Второй элемент (#w4) имеет ширину 150 пикселей. 100px идеально вписывается во второй столбец, созданный #w1. Еще 50 пикселей расширяются в третий столбец, который был создан #w2 и имеют ширину 75 пикселей. Это оставляет пробел в 25px, представляющий оставшийся пробел в третьем столбце.

• Третий элемент (#w5) имеет ширину 100 пикселей. Но поскольку он начинается с четвертого столбца шириной 75 пикселей, оставшиеся 25 пикселей переполняют контейнер.

Итог: В Chrome ширина столбцов фиксируется после рендеринга первой строки. Элементы сетки в последующих строках соответствуют ширине столбцов, установленной в первой строке.

---

Firefox

В отличие от Chrome, в Firefox кажется, что ширина столбцов не остается фиксированной после рендеринга первой строки. Ширина столбцов является гибкой на протяжении всего процесса рендеринга.

---

Край

То же, что и Chrome.