CSS网格：使用网格-列-开始/结束时的自动拟合行为类似于自动填充
当涉及到CSS网格时，我遇到了一些困惑。我将网格模板列设置为自动拟合，这工作非常好。除了我在div5上设置column-start/end之后，我开始使用自动填充行为来代替创建多个空白单元格。似乎我的最小最大函数的最大1fr没有做它的工作。
我是不是漏掉了什么明显的东西？
body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
#div5 {
grid-column-start: 1;
grid-column-end: -1;
}
下面的图像显示增加/减少窗口大小，显示自动填充行为。
根据请求添加代码段，您必须确保在全屏运行它，并水平增加屏幕大小以查看问题。
null
/* 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>null
共有1个答案
您希望前4个项目总是填充第一行，最后一个项目总是填充第二行。
这意味着您想要一个4列网格，最后一个项目跨越所有4列。
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
#div5 {
grid-column-start: 1;
grid-column-end: -1;
}
null
/* 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;
}html prettyprint-override"> <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>-
这个片段应该很好地说明了这一点，但下面是我想要实现的： 我希望我的第一行是，以便它跨越网格。这第一行并不总是存在的。 网格中的其他列应该是我不知道在任何给定的时间会有多少列。 问题是：当存在跨行时，以下列的行为是而不是。该片段显示跨列的存在如何改变后续列的行为。屏幕截图显示了正在创建的额外列。 您需要全屏运行代码段来查看它的操作。 如有任何建议将不胜感激。谢谢！ null null
-
我有4个专栏。第1和第4列的实际含量为150px，第2列为250px，第3列为370px。我想在浏览器宽度改变时换行这些列。当我减小浏览器的宽度时，我希望每列在换行之前收缩到它们的最低宽度。所以我想象第4列在其宽度低于150px之后会以100%的宽度落到下一行。 以下是我认为应该做到的： 有没有一种方法可以做到这一点，而不需要在“max-content”所在的位置传递固定的宽度？ 下面是我使用媒体
-
问题内容： 我在一个网格中嵌套了两个网格。不幸的是，右边的嵌套网格设置行的高度，以使左边和右边的网格都具有相同的高度，额外的空间在class的div之间共享。如何设置右侧嵌套网格的行以调整内容的大小，使其与左侧嵌套行的高度相同？ 问题答案： 您可以尝试 参考 您也可以只使用或
-
问题内容： 我想知道一种如何使用ajax或curl在外部站点（PHP）的多个页面上自动填充多个表单（使用）。 例如，一个站点有一个表单，可将您带到提交表单的时间，而还有另一种表单也需要填写和提交。我想从我的本地服务器自动填写两个表格。我该如何做到？ 问题答案： 最简单的方法是使用油脂类（https://addons.mozilla.org/en- US/firefox/addon/greasemo
-
java-jar C:\users\rash\desktop\selenium\selenium jars\selenium-server-standalone-2.39.0.jar-port 4444-role hub-nodetimeout 600 对于上面的所有命令，它都给出了一个消息“无法访问jar文件”。
-
问题内容： 我希望网格垂直填充： 而不是水平填充： 在我的网格中，我想指定列数，而不是行数。 这是我的div看起来： 问题答案： 最初，网格在水平方向上布置项目。这是因为网格容器的初始设置为 。 那就是您在布局中得到的： 如果切换到，则网格项目将垂直放置。 但是对于垂直轴上的行行为，您需要定义行。 从规格： 7.7。 自动放置：属性 此属性控制自动放置算法的工作方式，准确指定自动放置的项目如何流入