没有媒体查询的CSS网格元素堆栈怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (51)

当2列在使用CSS网格时在视图端口中被“压缩”时,我希望将它们堆叠起来。

我的代码如下:

<style>
.grid{
    display: grid;
    grid-template-columns: 1fr 260px;
    grid-gap: 1em;

}
@media only screen and (min-width:600px) {
  .grid {
     grid-template-columns: 100% 100%;
  }
}
</style>

<div class="grid">
    <main>More stuff here...</main>
    <aside>Stuff inside here...</aside>
</div>

柱子的宽度似乎是100%而不是堆叠的。没有媒体查询能做到这一点吗?

提问于
用户回答回答于

使用Flex属性而不是网格

.grid{
  display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
}

扫码关注云+社区

领取腾讯云代金券