没有媒体查询的堆栈 CSS Grid 元素答案

【问题标题】：Stack CSS Grid element without media queries没有媒体查询的堆栈 CSS Grid 元素
【发布时间】：2018-11-19 13:05:18
【问题描述】：

我希望使用 CSS 网格在视口中过于“挤压”时堆叠 2 列。

现在我有：

<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%，而不是堆叠。有没有办法在没有媒体查询的情况下做到这一点？

【问题讨论】：

如果只是要堆叠所有东西，只需将 display:grid 重置为 display:block ....
请发布足够的代码来重现问题。
使用display:flex 你可以这样做：codepen.io/danield770/pen/vrgaVr (resize page) .... 是你想要的效果吗？

标签： html css grid css-grid

【解决方案1】：

使用 flex 属性代替网格

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

【讨论】：

【解决方案2】：

您似乎正在寻找自动列数。

grid-template-columns 中的语法 repeat 允许使用关键字 auto-fit。使用该关键字时，会调整列数，使最大列宽不会超出网格宽度。

在 sn-p 中，设置最大宽度为 300px 使得网格大小为 550px 时只有 1 列：

.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(auto, 300px));
    grid-gap: 1em;
    border: solid 1px black;
    margin: 10px;
}

#grid1 {
  width: 550px;
}

#grid1 {
  width: 650px;
}

main {
    background-color: yellow;
}

aside {
    background-color: lightblue;
}

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

【讨论】：

【解决方案3】：

是的，我们可以使用flex box实现它

这是一段示例代码，我们可以在元素达到一定宽度时将其换行到新行，而无需编写任何外部媒体查询。

我们只需要在父元素中应用以下属性

display: flex; flex-wrap: wrap; justify-content: start;

这也是使用 flex-box 概念的优势之一。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.column-1, .column-2, .column-3 {
  width: 250px;
  height: 100px;
  margin: 5px;
}
.column-1 {
  background: green;
}
.column-2 {
  background: red;
}
.column-3 {
  background: yellow;
}

<div class="container">
  <div class="column-1"></div>
  <div class="column-2"></div>
  <div class="column-3"></div>
</div>

【讨论】：