将较小div的列移动到右侧和底部，以添加更大的div的新行。

Question

我正在尝试使用jade/pug和CSS从左到右动态地添加一行大div，然后将包含较小行列的列推到右边和下面。我确信我的问题在于对flex网格和CSS缺乏了解，所以我使用jade/pug的事实可能不如我试图使用divs/嵌套和CSS的方式重要……

我想要做到这一点：

1. 新的橙色div被添加，所以绿色的div和所有的栗色的都被上下移动。

​

​

1. 结果应该是这样：

​

​

我最后用了下面的CSS..。

div.top-stories{
   display: flex;
   flex-wrap: column wrap;
   flex-direction: row;
}
div.top-articles{
    width:350px;
    border-bottom:5px solid lightgrey;
    border-left:1px dotted lightgrey;
}

div.stories{
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
}
div.articles{
    width:350px;
    border-bottom:3px solid lightgrey;
    border-left:1px dotted lightgrey;
}

..。下面的玉/巴格代码..。

    div.top-stories
        div.top-articles.w3-panel.w3-margin
            h2= headline
            h4= content
        div.top-articles.w3-panel.w3-margin
            h2= headline
            h4= content
    div.stories
        div.articles.w3-panel.w3-margin
            p= content
        div.articles.w3-panel.w3-margin
            p= content
        div.articles.w3-panel.w3-margin
            p= content
        div.articles.w3-panel.w3-margin
            p= content
        div.articles.w3-panel.w3-margin
            p= content
        div.articles.w3-panel.w3-margin
            p= content
        div.articles.w3-panel.w3-margin
            p= content
        div.articles.w3-panel.w3-margin
            p= content

..。这是：

​

​

注意:我使用的是w3-css，这就是为什么我将w3类添加到pug元素中。

Answer 1

我希望我已经正确地理解了你的问题。

下面是使用CSS的可能布局。添加和减去大的框，以检查它是否适合您的用例。

码页

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 350px);
  grid-template-rows: repeat(auto-fill, 50px);
  grid-gap: 10px;
}

基本上，我已经声明了一个网格，它将创建与视图端口中相同数量的350px-wide列。我还显式地将行高设置为小框的高度。

在您的情况下，如果您希望一个大盒子的高度相当于6个小盒子，您可以使用以下公式：

((小盒子的数目)*(小盒子的高度)+(栅格间距*(小盒子的数目-1))

(6 *50)+(10* 5) =350

您可以轻松地调整这个布局，并通过将px单元替换为%、auto、fr或viewport单元，从而使其响应性更强。

​

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 350px);
  grid-template-rows: repeat(auto-fill, 50px);
  grid-gap: 10px;
}

.big {
  background: orange;
  height: 350px; 
  grid-row: span 6;
}

.big + .small {
  background: green;
}

.small {
  height: 50px;
  background: pink;
}

body {
  margin: 0;
}

<div class="grid">
  <div class="big"></div>
  <div class="big"></div>
  <div class="big"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  
</div>

​