如何创建网格表 4x3，其中两个项目的高度为 50%

Question

我想创建一个这样的网格表（两个项目的高度为 50%）

我的HTML和Sass代码现在看起来像：

<div class="grid">
   <div class="grid__list">
          <div class="grid__item">1</div>
          <div class="grid__item">2</div>
          <div class="grid__item">3</div>
          <div class="grid__item">4</div> 
          <div class="grid__item">5</div>
          <div class="grid__item">6</div>
</div>
</div>

.grid
    &__list
        display: grid
        grid-template-columns: repeat(3, 1fr)
        grid-template-rows: repeat(3, 1fr)
        grid-column-gap: 20px
        grid-row-gap: 20px
        min-height: 1000px
    &__item
        border-radius: 5px
        background: blue
        &:nth-child(1)
            grid-area: 1 / 1 / 4 / 2
        &:nth-child(2)
            grid-area: 1 / 3 / 2 / 4
        &:nth-child(3)
            grid-area: 2 / 3 / 3 / 4
        &:nth-child(4)
            grid-area: 3 / 3 / 4 / 4
        &:nth-child(5)
            grid-area: 1 / 2 / 3 / 3
        &:nth-child(6)
            grid-area: 3 / 2 / 4 / 3

Answer 1

你需要一个六行网格......而不是三个。

 * { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing: inherit; } .grid__list { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; height: 100vh; grid-auto-flow: column; padding: .5em; } .grid__item { background: blue; display: flex; justify-content: center; align-items: center; font-size: 2em; color: white; grid-row: span 2; } .grid__item:nth-child(1) { grid-row: span 6 } .grid__item:nth-child(2), .grid__item:nth-child(3) { grid-row: span 3 }

 <div class="grid__list"> <div class="grid__item">1</div> <div class="grid__item">2</div> <div class="grid__item">3</div> <div class="grid__item">4</div> <div class="grid__item">5</div> <div class="grid__item">6</div> </div>

Answer 2

尝试这个。 为我工作。

.grid__item {
  border-radius: 5px;
  background: blue;
  &:nth-child(1) {
    grid-column: 1;
    grid-row: 1/4;
  }

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

  &:nth-child(3) {
    grid-column: 2;
    grid-row: 3;
  }      
}