如何实现不同高度的新包装？

Question

我有一个有趣的块位置案例。请给我一些如何实现它的建议。

对于这个HTML

<div class="container">
  <div class="item grey">1</div>
  <div class="item purple" style="height: 150px;">2</div>
  <div class="item blue">3</div>
  <div class="item blue">4</div>
  <div class="item blue">5</div>
  <div class="item blue">6</div>
  <div class="item blue">7</div>
  <div class="item blue">8</div>
  <div class="item purple">9</div>
  <div class="item purple"></div>
</div>

我想得到这个结果：

我已经尝试过内联块jsfiddle-code并得到了这个：

和flex jsfiddle-code - 得到了这个：

Answer 1

如何使用CSS Grid解决方案？我是CSS Grid的新手，所以我不是100％肯定没有更好的方法来做到这一点。

CSS Grid非常棒，因为它允许您在项目中创建自定义网格容器，并使您可以更好地控制网格中行和列的大小和对齐方式。在此示例中，使用grid-template-columns和grid-template-rows可以确定网格线的垂直和水平位置。您可以进一步自定义每个grid-item的属性，在您的情况下，是为第二个div（.item:nth-child(2)）完成的，它需要两倍于所有其他网格项的高度。

查看this link和this link了解更多信息。

另外，作为旁注，您可以将Flexbox和CSS Grid结合使用，以便更灵活地进行布局。

.container {
  display: grid;
  grid-template-columns: 75px 75px 75px 75px;
  grid-template-rows: 75px 75px 75px;
}
 
.item {
  border: 1px solid black;
}

.item:nth-child(2) {
  -ms-grid-row: 1 / 3 ;
  grid-row: 1 / 3;
  -ms-grid-column: 2 / 3;
  grid-column: 2 / 3;
}

<div class="container">
  <div class="item grey">1</div>
  <div class="item purple">2</div>
  <div class="item blue">3</div>
  <div class="item blue">4</div>
  <div class="item blue">5</div>
  <div class="item blue">6</div>
  <div class="item blue">7</div>
  <div class="item blue">8</div>
  <div class="item purple">9</div>
</div>