CSS网格:使用grid-column-start/end时,自动调整的行为类似于自动填充
Bry*_*ner 7 css grid css3 css-grid
在CSS Grid方面,我遇到了一些困惑.我将网格模板列设置为自动调整,并且完美无缺.除了我在div5上设置column-start/end之外,我开始获得自动填充行为,而不是创建多个空白单元格.似乎我的minmax功能的最大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;
}
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;
}原代码的问题：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
是它auto-fit用于响应式布局网格，其中列的数量不固定，而是网格根据网格内容和布局方法创建新列。
在你的情况下，这显然不是你所需要的。