css - 让 CSS 网格区域在移动设备上堆叠(单列布局)

Question

我试图让 CSS Grid block 在小屏幕上查看时相互堆叠。我知道我可以编写媒体查询将两列更改为一列。但我认为 Grid 可以在没有它们的情况下处理这个问题？

我认为我可以通过自动调整列来实现这一点。但是，我想我可能误解了它是如何工作的？

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "leftCol rightTop" "leftCol rightBottom";
  height: 100vh;
}

.leftCol {
  grid-area: leftCol;
  background-color: pink;
  width: 100%;
  height: 100;
}

.rightBottom {
  grid-area: rightBottom;
  background-color: yellow;
  width: 100%;
  height: 100;
}

.rightTop {
  grid-area: rightTop;
  background-color: blue;
  width: 100%;
  height: 100;
}

<div class="grid-container">
  <div class="leftCol"></div>
  <div class="rightBottom"></div>
  <div class="rightTop"></div>
</div>

当屏幕低于 400px 时，右侧的列就会消失。我原以为它们会堆叠在一起。

例如:

CodePen Example

Answer 1

I am trying to get CSS Grid blocks to stack on top of each other when viewed on small screens. I know I can write media queries to change two columns to one. But I thought Grid could handle this without them? I thought I could achieve this with auto-fit on columns.

可以。

给你:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: 50%;
  height: 100vh;
}

.leftCol     { background-color: pink; }
.rightBottom { background-color: yellow; }
.rightTop    { background-color: blue; }
body         { margin: 0; }

<div class="grid-container">
  <div class="leftCol"></div>
  <div class="rightBottom"></div>
  <div class="rightTop"></div>
</div>

revised codepen

---

这是您的原始代码的问题:

repeat() 函数允许您在网格容器中呈现轨道模式。

使用auto-fit 或auto-fill，repeat() 函数将呈现尽可能多的轨道而不会溢出容器。

就其本身而言，您的代码会按预期工作，如上图所示。

grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))

使用此规则，网格元素在较小的屏幕上堆叠成一列。

但是，当您引入明确的列和行时，这会干扰 repeat() 和 auto-fit 完成其工作的能力。

grid-template-areas: "leftCol rightTop" "leftCol rightBottom"

这条规则告诉网格元素它们需要在什么地方，阻碍 repeat()。

grid-template-rows: 1fr 1fr

此规则在容器中创建了两行限制，将第三项推离屏幕。

简而言之，不要添加干扰 repeat()/auto-fit 的规则。如果您需要更复杂的布局，请使用媒体查询。