砌体网格布局CSS

Question

我正在尝试创建一个布局，即3列，每个列只能有2组任意大小的元素。项的组应流到下一列的顶部到底部。

我不熟悉css网格的局限性。这有可能只使用CSS吗？下面是一个代码示例，说明我试图在不影响组的砖石类型的情况下实现什么。

示例A

​

示例B

​

<div class="container">
    <div class="group-1 group">
      <div class="item-1 item">item 1</div>
      <div class="item-2 item">item 2</div>
      <div class="item-3 item">item 3</div>
      <div class="item-4 item">item 4</div>
    </div>
    <div class="group-2 group">
      <div class="item-1 item">item 1</div>
      <div class="item-2 item">item 2</div>
      <div class="item-3 item">item 3</div>
    </div>
    <div class="group-3 group">
      <div class="item-1 item">item 1</div>
      <div class="item-2 item">item 2</div>
      <div class="item-3 item">item 3</div>
      <div class="item-4 item">item 4</div>
      <div class="item-5 item">item 5</div>
      <div class="item-6 item">item 6</div>
    </div>
    <div class="group-4 group">
      <div class="item-1 item">item 1</div>
      <div class="item-2 item">item 2</div>
    </div>
    <div class="group-5 group">
      <div class="item-1 item">item 1</div>
    </div>
    <div class="group-6 group">
      <div class="item-1 item">item 1</div>
      <div class="item-2 item">item 2</div>
      <div class="item-3 item">item 3</div>
      <div class="item-4 item">item 4</div>
    </div>
</div>

CSS

/* ================================= 
  Flexbox
==================================== */

.container {
    display: grid;
    grid-template-columns: 1fr;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 30em) {

  .container {
      grid-template-rows: 1fr 1fr;
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
 }
}

/* ================================= 
  Page Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-size: 1.35em;
    font-family: 'Varela Round', sans-serif;
    color: #fff;
    background: #e8e9e9;
    padding-left: 5%;
    padding-right: 5%;
}

.container {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    margin: 45px auto;
    box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);
}

.group {
    color: #fff;
    padding: 15px;
    margin: 5px;    
    background: #3db5da;
    border-radius: 3px;
}

.item {
    color: #fff;
    padding: 15px;
    margin: 5px;    
    background: #1f6980;
    border-radius: 3px;
}

http://jsbin.com/quheday/1/edit?html,css,output

Answer 1

也许这个能帮上忙。我用这个解决办法，我所有的假砖石布局，它是负责的。

style.scss文件中的代码。

.masonry-3-col {
    max-width: 100%;
    margin: 0 auto;
    column-count: 1;
    column-gap: 1em;


    @media all and (min-width: $display-tablet) {column-count: 2;}
    @media all and (min-width: $display-desktop) {column-count: 3;}

    > div {
        width: 100%;
        overflow: hidden;
        margin-bottom: 1em;
    }
}

$display和$Display桌面是768 are和1024 are这样的内部变量。

Html文件中的代码

<div class="masonry-3-col">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>
   <div>Item 6</div>
   <div>Item 7</div>
</div>

就这样