Question

在下面的示例中，当屏幕尺寸减小时，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>

Answer 1

我认为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中的定义，但这似乎是渲染行为。

Answer 2

当你说

在下面的示例中，当屏幕尺寸减小时，main应该被推到第二行，但是由于某种原因，即使页脚从第3列开始，
还是有足够的空间，它仍停留在第一行以便让主机向下移动。

您忘记了这不是预期的行为。

页脚位于第3列，因此共有3列。

网格自动流是默认值行。

因此，即使有足够的空间向下移动， main 也会首先尝试填充第3列的空白单元格。它不会移动到新行，因为那里有可用空间，但如果当前行没有更多空间，它将这样做。

使用grid-column-start会导致网格项目的自动放置停止工作

2 个答案: