html - css flexbox 网格砌体风格

Question

我一直在尝试使用 CSS 和 Flexbox 实现以下布局，但没有任何运气。也许这里有人可以帮助我，指出我犯过的错误，甚至建议我最好的做法。

这应该是最终结果(所有元素的高度和宽度都不同，但我开始认为 flexbox 不是最好的选择):

实例:https://jsfiddle.net/bogdaniel/Lzugkva3/5/

<div class="container">
  <div class="blog-container">
    <div class="blog-item" style="height: 286px;">
      <div class="blog-post">
        <div class="post-body">
          <div class="post-title">
            <h2>Item One</h2>
            <span>height: 286px;</span>
            <p>Item Should Be First In The List On The Left Column</p>
          </div>
        </div>
      </div>
    </div>
    <div class="blog-item" style=";height: 203px;">
      <div class="blog-post">
        <div class="post-body">
          <div class="post-title">
            <h2>Item Two</h2>
            <span>height: 203px;</span>
            <p>Item Should Go To The right next to the height 286px;</p>
          </div>
        </div>
      </div>
    </div>
    <div class="blog-item" style="height: 255px;">
      <div class="blog-post">
        <div class="post-body">
          <div class="post-title">
            <h2>Item Three</h2>
            <span>height: 255px;</span>
            <p>Item Should Be Second On the First Row In the List</p>
          </div>
        </div>
      </div>
    </div>
    <div class="blog-item" style="height: 325px;">
      <div class="blog-post">
        <div class="post-body">
          <div class="post-title">
            <h2>Item Four</h2>
            <span>height: 325px;</span>
            <p>Item Should Go To The right Of Item Three On The Second Column</p>
          </div>
        </div>
      </div>
    </div>
    <div class="blog-item" style="height: 251px;">
      <div class="blog-post">
        <div class="post-body">
          <div class="post-title">
            <h2>Item Five</h2>
            <span>height: 251px;</span>
            <span>width: 523px;</span> Item Should Start From The Left And Span 2 Columns Almost
          </div>
        </div>
      </div>
    </div>
    <div class="blog-item" style="height: 282px;">
      <div class="blog-post">
        <div class="post-body">
          <div class="post-title">
            <h2>Item Six</h2>
            <span>height: 282px;</span>
            <span>width: 186px;</span>
            <p>Item Should Be Portrait And Span On The Right Column</p>

          </div>
        </div>
      </div>
    </div>
    <div class="blog-item" style=" width: 100%%; height: 204px;">
      <div class="blog-post">
        <div class="post-body">
          <div class="post-title">
            <h2>Item Seven</h2>
            <span>height 204px;</span>
            <span>with: 523px;</span>
          </div>
        </div>
      </div>
    </div>
    <div class="blog-item" style="width: 186px; height: 174px;">
      <div class="blog-post">
        <div class="post-body">
          <div class="post-title">
            <h2>Item Eight</h2>
            <span>height: 174px;</span>
            <span>width: 186px;</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS代码:

.blog-container {
  display: flex;
  flex-flow: column wrap;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  min-height: 1400px;
  height: 100vh;

  /* Force new columns */
  &:before,
  &:after {
    content: "";
    flex-basis: 100%;
    width: 0;
    order: 2;
  }

  /* Optional */
  background-color: #f7f7f7;
  border-radius: 3px;
  margin: 15px auto;
  counter-reset: items;
}

.blog-item {
  width: 50%;
  padding: 14px;
    .blog-post {
    height: 100%;
    /* Optional */
    position: relative;
    border-radius: 3px;
    border: 1px solid #4290e2;
    box-shadow: 0 2px 2px rgba(0, 90, 250, 0.05),
      0 4px 4px rgba(0, 90, 250, 0.05), 0 8px 8px rgba(0, 90, 250, 0.05),
      0 16px 16px rgba(0, 90, 250, 0.05);
    color: #000;
    padding: 15px;
    &:before {
      counter-increment: items;
      content: counter(items);
    }

    .post-body {
      padding: 15px;
    }
  }
}
.blog-item:nth-child(2n + 1) {
  order: 1;
}
.blog-item:nth-child(2n + 2) {
  order: 2;
}
.blog-item:nth-child(2n + 3) {
  order: 1;
}
.blog-item:nth-child(2n + 4) {
  order: 2;
}

Answer 1

在等待评论时，如果布局要像图像一样，那么您可以使用网格并提前设置每个元素要跨越的行数和单元格数。

有用的资源:https://css-tricks.com/snippets/css/complete-guide-grid/ & https://gridbyexample.com/

body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, auto);
}

div:nth-child(1) {
  grid-row: span 2;
}

div:nth-child(2) {
  grid-column: span 3;
}

div:nth-child(3) {
  grid-row: 3
}

div:nth-child(4) {
  grid-column: span 3;
  grid-row: span 2;
}

div:nth-child(5) {
  grid-column: span 3;
}

div:nth-child(6) {
  grid-row: span 2
}

div:nth-child(7) {
  grid-column: span 3;
  grid-row: span 2
}


/* makup */

body {
  counter-reset: divs;
  background: rgb(236, 244, 175);
}

div:before {
  counter-increment: divs;
  content: counter(divs);
  background: tomato;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  text-align: center;
  color: green;
  text-shadow: 0 0 3px white;
  box-shadow: 0 0 3px;
}

div {
  border-radius: 3px;
  border: 1px solid darkblue;
  background: lightblue;
}

body {
  margin: 0;
  grid-gap: 2vh;
  padding: 2vh;
  min-height: 100vh;
  box-sizing: border-box;
}

div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(8px + 1.5vh + 1.5vw)
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

这是一个codepen测试和玩(调整大小/添加内容，...)