我试图让CSS Grid块在小屏幕上堆叠在一起。我知道我可以编写媒体查询来将两列更改为一列。但是我认为Grid可以在没有它们的情况下处理这个问题?
我认为我可以通过列上的 auto-fit 来实现这一点。然而,我认为我可能误解了它的工作原理?
.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>
例如:
![Grid mock up](https://istack.dev59.com/9mLga.webp)
grid-template-areas
或任何grid-area
定义的情况下查看网格行为 - 您会看到随着窗口大小的减小,网格项会堆叠起来... - kukkuz