html - 添加新行的较大 div 时，将较小 div 的列移动到右侧和底部

Question

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

我想完成这个:

1. 添加了新的橙色 div，因此绿色 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;
}

...以及以下 jade/pug 代码...

    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-classes 添加到 pug 元素的原因。

Answer 1

希望我已经正确理解了您的问题...

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

codepen

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

基本上，我已经声明了一个网格，它将创建尽可能多的 350px将适合视口(viewport)的宽列。我还明确地将行高设置为一个小盒子的高度。

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

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

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

您可以轻松调整此布局并通过替换 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>