如果为列和行设置模板,如何自动进行CSS网格包装?

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

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

我有12个子div在我的.wrapper元素,我想把它们叠在一起。数字12实际上是动态的,所以我不知道我会有多少子元素。现在,我的网格布局如下所示:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  grid-auto-flow: column dense;
  grid-gap: 10px;
}

直到网格应该开始包装元素(布局已满,网格为3x2,其中包含6个元素)。第七个,第八个和所有其余的都堆叠在前六个旁边,尽管我希望它们在一个具有相同模板的新行中(因此基本上我的网格将变为2x(3x2))。

这个解释可能本身并没有多大意义,也可以查看Codepen(https://codepen.io/anon/pen/gKVYzO)。

如何在第六个元素换行后将元素换成新行?

提问于
用户回答回答于

这应该对你有用。我更改了grid-auto-flow从…column denserow dense

* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    grid-auto-flow: row dense;
    grid-gap: 10px;
}
<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    
    <div>Six</div>
    <div>Seven</div>
    <div>Eight</div>
    <div>Nine</div>
    <div>Ten</div>
    <div>Eleven</div>
    <div>Twelve</div>
</div>

扫码关注云+社区

领取腾讯云代金券