时间戳

首页 > 解决方案 > css-grid：具有不同行数的列

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

问题描述

我有以下布局：

.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 网格，我该怎么做？

标签： csscss-grid

解决方案

这是你想要的吗。

你可以在这里阅读更多grid-row

运行代码片段以查看它在下面的工作

.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>

推荐阅读