在下面的示例中，当屏幕尺寸减小时，main 应该被推到第二行，但出于某种原因，即使页脚从第 3 列开始并且 main 有足够的空间，它仍停留在第一行向下移动。
如果我从页脚中删除 grid-column-start/end，网格将完全响应并在调整大小时将 main 推到第二行。
我的想法是“也许当涉及到定位时，元素会从它们的正常网格流中‘弹出’，并且可以说是在它们自己的小‘维度’中”。但是，当我将定位添加到 main { grid-column-start: 4 } 时，它不会“弹出”其位置并被插入“仅定位网格项的维度”。它只是停留在第 1 行并向右移动。
如果维度的东西没有意义，我深表歉意，但我只是想分享我的想法。
例子:
body {
height: 100vh;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
footer {
grid-column-start: 3;
grid-column-end: 4;
}
header {
background: tomato;
border: 2px solid red;
}
main {
background: yellow;
border: 2px solid gold;
}
nav {
background: limegreen;
border: 2px solid green;
}
footer {
background: dodgerblue;
border: 2px solid blue;
}<body>
<header>Header</header>
<nav>Nav</nav>
<main>Main</main>
<footer>Footer</footer>
</body>最佳答案
我认为 grid-column 在 auto-fill/auto-fit 情况下的实际作用是卡住列。
因此:
footer {
grid-column-start: 3;
grid-column-end: 4;
}
...第三列中的元素被锁定，将不再换行。因此，main 之前的元素 - header 和 nav - 被阻止换行到下一行，并保持限制在第一行行(demo)。
如果您尝试这样做:
footer {
grid-column-start: 2;
grid-column-end: 3;
}
...第二列中的元素被锁定，将不再换行。结果，nav 之前的元素 - header - 被阻止换行到下一行，并保持限制在第一行。但是 nav 之后的元素 - main - 仍然可以自由换行 (demo)。
不确定这在 grid spec 中的何处定义，但这似乎是渲染行为。
关于html - 使用 grid-column-start 会导致网格元素的自动放置停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50939058/