css-grid:具有不同行数的列

Question

我有以下布局：

​

.container {
  width: 630px;
  height: 630px;
  display: grid;
  column-gap: 10px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto auto;
}

.first, .second, .third, .fourth, .fifth, .sixth, .seventh {
  width: 200px;
  height: 200px;
  background-color: pink;
}

.first, .second {
  height: 400px;
}

.fourth {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background-color: yellow;
}

.seventh {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

<div class='container'>
  <div class='first'>1</div>
  <div class='second'>2</div>
  <div class='third'>3</div>
  <div class='fourth'>4</div>
  <div class='fifth'>5</div>
  <div class='sixth'>6</div>
  <div class='seventh'>7</div>
</div>

​

我希望第一列和第二列有2行，采取3fr 1fr和最后一列有3行采取2fr 1fr 1fr。最终结果将是4号框嵌套在3号和7号之间，而不会脱离前两列中的框创建的矩形。

此最终定位应如下所示：

​

这是可能的使用css网格，我怎么做呢？

Answer 1

您可以尝试如下所示：

​

.container {
  width: 700px;
  height: 700px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap: 20px;
}

.first,
.second,
.third,
.fourth,
.fifth,
.sixth,
.seventh {
  width: 100%;
  height: 100%;
  background-color: pink;
}

.first,
.second {
  grid-row: 1 / 3;
}

.second,
.sixth {
}

.fourth {
  background-color: yellow;
}

<div class='container'>
  <div class='first'>1</div>
  <div class='second'>2</div>
  <div class='third'>3</div>
  <div class='fourth'>4</div>
  <div class='fifth'>5</div>
  <div class='sixth'>6</div>
  <div class='seventh'>7</div>
</div>

​

Answer 2

这是你想要的吗。

您可以阅读有关grid-row here的更多信息

运行snippet以查看其在下面的工作情况

​

.container {
  width: 700px;
  height: 700px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap: 20px;
}

.first,
.second,
.third,
.fifth,
.sixth,
.seventh {
  background-color: pink;
}

.first,
.second {
  grid-row: 1 / 3;
}

.fourth {
  background-color: yellow;
}

<div class='container'>
  <div class='first'>1</div>
  <div class='second'>2</div>
  <div class='third'>3</div>
  <div class='fourth'>4</div>
  <div class='fifth'>5</div>
  <div class='sixth'>6</div>
  <div class='seventh'>7</div>
</div>

​