当涉及到 CSS 网格时，我遇到了一些困惑。我将 grid-template-columns 设置为自动调整，效果非常好。除了在 div5 上设置 column-start/end 之外，我开始获得自动填充行为，而不是在创建多个空白单元格的地方。我的 minmax 函数的 max 1fr 似乎没有发挥作用。
我是否遗漏了一些明显的东西？
body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
#div5 {
grid-column-start: 1;
grid-column-end: -1;
}
下图显示了增加/减小的窗口大小，显示了自动填充行为。
根据要求添加了代码片段您必须确保在全屏模式下运行它并水平增加屏幕尺寸才能看到问题。
/* Div Styles */
#div1 { background: yellow }
#div2 { background: dodgerblue }
#div3 { background: tomato }
#div4 { background: limegreen }
#div5 { background: yellow }
/* Body Style */
body { margin: 0; }
/* Grid Settings */
body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: minmax(200px, 1fr);
}
#div5 {
grid-column-start: 1;
grid-column-end: -1;
}<!DOCTYPE HTML>
<html>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="div5">Div 5</div>
</body>
</html>最佳答案
您希望前 4 项始终填充第一行，最后一项始终填充第二行。
这意味着您需要一个 4 列网格，其中最后一项跨越所有 4 列。
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
#div5 {
grid-column-start: 1;
grid-column-end: -1;
}
/* Div Styles */
#div1 { background: yellow }
#div2 { background: dodgerblue }
#div3 { background: tomato }
#div4 { background: limegreen }
#div5 { background: aqua }
/* Body Style */
body { margin: 0; }
/* Grid Settings */
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: minmax(200px, 1fr);
}
#div5 {
grid-column-start: 1;
grid-column-end: -1;
} <div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="div5">Div 5</div>原代码的问题:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
是它使用了 auto-fit，它适用于列数不固定的响应式布局网格，而是网格根据网格内容和布局方法生成新列。
这显然不是您所需要的。
关于CSS 网格 : Auto-fit behaving like Auto-fill when using grid-column-start/end，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50705273/