Question

我希望一旦他们得到太多就会堆叠2列＃34;压扁＆＃34;在视口中使用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％的宽度而不是堆叠。有没有办法在没有媒体查询的情况下做到这一点？

Answer 1

使用flex属性而不是grid

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

Answer 2

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

grid-template-columns中的语法重复允许关键字自动适合。使用此关键字时，将调整列数，以使最大列宽不会超出网格宽度。

在代码段中，将最大宽度设置为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>

Answer 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>

堆栈CSS网格元素没有媒体查询

3 个答案: