CSS 网格最小内容不适合内容

Question

我正在尝试通过为元素显式分配行、列和大小并允许 CSS 网格使用以下 CSS 来调整列和行的大小，从而将一些 div 放入网格中.

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 创建的第二列。另一个 50px 延伸到第三列，由 #w2 创建，宽度为 75px。 留下 25px 的空隙，代表第三列剩余的 space。
第三项 (#w5) 的宽度为 100px。但由于它从第四列开始，宽度为 75px，因此剩余的 25px 会溢出容器。

底线： 在Chrome中，列的宽度固定一次行被渲染。后续行中的网格项遵循第一行中确定的列宽。

火狐

与 Chrome 不同，在 Firefox 中，列宽在呈现第一行后似乎不会保持固定。列宽在整个呈现过程中是灵活的。

边缘

与Chrome相同。

CSS 网格最小内容不适合内容

CSS Grid min-content not fitting content

css

css-grid

Chrome

火狐

边缘