Question

我有以下布局：

＆＃13;

.grid {
  display: grid;
  grid-template-columns: 645px 316px;
  grid-gap: 20px;
}

.top {
  grid-column: 1 / 2;
  grid-row: 1;
  background-color: green;
}

.right {
  grid-column: 2;
  grid-row: 1 / span 2;
  background-color: blue;
}

.bottom {
  grid-column: 1;
  grid-row: 2;
  background-color: red;
}

＆＃13;

<div class="grid">
  <div class="top">top</div>
  <div class="right">
    a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br>
  </div>
  <div class="bottom">
    bottom
  </div>
</div>

＆＃13;

如何使用网格完全相同，但绿色顶部占用的空间量只有一行。也就是说，底部的红色部分应该向右推到“＃34; top＆＃34;以便删除顶部绿色部分中的额外空白区域

Answer 1

创建一个网格，比方说，25个小行。像这样：

grid-template-rows: repeat(25, 10px);

制作＆＃34; top＆＃34; （绿色）项目跨越四行。

.top {
    grid-row: 1 / 4;
}

制作＆＃34;底部＆＃34; （红色）项目跨越剩余的行。

.bottom {
    grid-row: 6 / -1;
}

（从第6行开始为最初的20px行间隙腾出空间。）

使＆＃34;对＆＃34; （蓝色）项目跨越所有行。

.right {
    grid-row: 1 / -1;
}

revised codepen

＆＃13;

.grid {
  display: grid;
  grid-template-columns: 645px 316px;
  grid-template-rows: repeat(25, 10px);
  grid-column-gap: 20px;
}

.top {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  background-color: green;
}

.right {
  grid-column: 2;
  grid-row: 1 / -1;
  background-color: blue;
}

.bottom {
  grid-column: 1;
  grid-row: 6 / -1;
  background-color: red;
}

＆＃13;

<div class="grid">
  <div class="top">top</div>
  <div class="right">
    a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/>
  </div>
  <div class="bottom">bottom</div>
</div>

＆＃13;

删除CSS Grid中的空白区域

1 个答案: