Question

我尝试创建一个3列的布局，每列只能有2组任意大小的元素。项目组应从上到下流入下一列

我不熟悉css网格的局限性。仅使用CSS可以做到这一点吗？这是一个代码示例，说明我在没有组织的砌体类型效果的情况下尝试实现的目标。

示例A

示例B

HTML

<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

砌体网格布局CSS

0 个答案: