如何使用网格在CSS中进行此布局？

Question

This is how it should look

[请帮助我构建惠特网格CSS

Answer 1

您只需要创建三行，然后使用grid-template-rows来使中间的行短：

.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 6fr 1fr 6fr;  
  grid-gap: 10px;
  height: 550px;
  grid-template-areas: 
  "a b c"
  "a e c"
  "d e f"
}

.item{border: 1px solid black}
.a{grid-area: a}
.b{grid-area: b}
.c{grid-area: c}
.d{grid-area: d}
.e{grid-area: e}
.f{grid-area: f}

<div class="grid">
  <div class="item a">a</div>
  <div class="item b">b</div>
  <div class="item c">c</div>
  <div class="item d">d</div>
  <div class="item e">e</div>
  <div class="item f">f</div>
</div>

Answer 2

如果将span 12替换为span 13，它将使您的“ e”框触底。就像下面的代码片段所示。

.e{
     grid-row: 7 / span 13;
     /*   height: 260px; */
  }

Answer 3

此库将为您完成https://masonry.desandro.com/