我试图通过显式分配行、列和元素大小来将一些 div 放入网格中，并允许 CSS 网格使用以下 CSS 执行列和行大小调整工作。
display: grid;
grid-auto-columns: min-content;
价值min-content应该将列设置为适合内容而不会溢出的最小可能大小。然而，这并没有发生。尽管这些元素都可以放入 350 像素的网格中，但第三列太大，导致不必要的空白。
这是正在发生的事情的图像。
这是实际的代码：JSFiddle https://jsfiddle.net/bamazap/6jkLngmk/
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>
第一行中的网格项创建四列：
#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 中，第一行中的网格项的长度在各列之间平均分配。
所以前两列的宽度是 100px：
后两列的宽度为 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宽 75 像素。这样会留下 25 像素的间隙，代表第三列中的剩余空间。
第三项（#w5) 宽 100 像素。但由于它从第四列开始，宽度为 75 像素，因此剩余的 25 像素会溢出容器。
底线： 在 Chrome 中，一旦呈现第一行，列的宽度就固定了。后续行中的网格项遵循第一行中建立的列宽。
Firefox
与 Chrome 不同，在 Firefox 中，渲染第一行后列宽似乎不再保持固定。列宽在整个渲染过程中是灵活的。
Edge
与 Chrome 相同。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
