具有不同大小的项目的网格布局

Question

我遇到一个我不知道如何解决的问题。

我有一个网格系统，其中有18个项目/盒子的大小相同。我需要删除4个项目/框并使其成为一个大项目/框。

请检查下面的线框。这就是我想要的样子：）

.grid_big {
  margin-bottom: 200px;
}

.grid_big .grid_item {
  width: 16.6%;
  display: inline-block;
  float: left;
}

.grid_big .grid_item img {
  width: 100%;
  border: 1px solid;
  /* visibility: hidden; */
}

.grid_big .grid_item .grid_content {
  margin: 20px;
}

<div class="grid_big">
  <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
  <div class="fixfloat"></div>
</div>

（网格项目+网格内容x 18）

Answer 1

您可以使用 Grid 做这样的事情，这对于此类任务非常理想：

* {box-sizing: border-box}

.grid_big {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(6, 1fr); /* grid-template-rows / grid-template-columns */
  grid-gap: 10px; /* grid-row-gap / grid-column-gap */
}

/* grab the 7th one and make it span 2 rows & columns */
.grid_item:nth-child(7){
  grid-row: span 2;
  grid-column: span 2;
}

img {
  display: block; /* removes bottom margin/whitespace */
  width: 100%;
  border: 1px solid;
}

<div class="grid_big">
  <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
    <div class="grid_item">
    <div class="grid_content">
      <img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
    </div>
  </div>
</div>

Answer 2

Grid（网格模板区域）可能会解决您的问题。