小编Bry*_*ner的帖子
CSS网格:使用grid-column-start/end时,自动调整的行为类似于自动填充
在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);
} …7
推荐指数
推荐指数
1
解决办法
解决办法
521
查看次数
查看次数