Html 删除CSS网格中的空白

我的布局如下：

.grid{
显示：网格；
网格模板列：645px 316px；
栅隙：20px；
}
.顶{
网格柱：1/2；
网格行：1；
背景颜色：绿色；
}
.对{
网格柱：2；
网格行：1/2跨；
背景颜色：蓝色；
}
.底部{
网格柱：1；
网格行：2；
背景色：红色；
}

顶部
a
a
a
a
a
a
a
a
a
a
a

底部

创建一个包含25行的网格。大概是这样的：

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

使“顶部”（绿色）项目跨四行

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

使“底部”（红色）项跨越其余行

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

（从第6行开始，为原来的20px行间距留出空间。）

使“右”（蓝色）项跨越所有行

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

.grid{
显示：网格；
网格模板列：645px 316px；
网格模板行：重复（25，10px）；
栅柱间隙：20px；
}
.顶{
网格柱：1/2；
网格行：1/4；
背景颜色：绿色；
}
.对{
网格柱：2；
网格行：1/-1；
背景颜色：蓝色；
}
.底部{
网格柱：1；
网格行：6/-1；
背景色：红色；
}

顶部
a
a
a
a
a
a
a
a
a
a
a

底部

如果顶部和底部部分实际具有动态高度，请发布更多详细信息。您可能需要使用

auto

和

fr

，而不是固定的单位。。。<代码>最小内容< /代码>优于<代码> Auto <代码>吗？这实际上对PauleEd有效。如果顶部DIV没有内容，它可以自动删除/底部移动到顶部吗？考虑用一个更完整的例子来发布另一个问题。我的回答提供了一个基本问题的基本解决方案。如果您正在处理动态高度或可移动网格项目，请下次添加这些详细信息。好主意，我已经用iv迄今为止尝试的方法完成了这一点：