css网格：具有不同行数的列

我的布局如下：

.container{
宽度：630px；
高度：630px；
显示：网格；
柱间距：10px；
网格模板柱：2fr 1fr 1fr；
网格模板行：自动；
}
.第一、.第二、.第三、.第四、.第五、.第六、.第七{
宽度：200px；
高度：200px；
背景颜色：粉红色；
}
.第一，.第二{
高度：400px；
}
.第四{
网格柱：3/4；
网格行：2/3；
背景颜色：黄色；
}
.第七{
网格柱：3/4；
网格行：3/4；
}

1.
2.
3.
4.
5.
6.
7.

这就是你想要的吗

您可以阅读有关网格行的更多信息

运行代码段以查看其在下面的工作情况

.container{
宽度：700px；
高度：700px；
显示：网格；
网格模板列：重复（3，1fr）；
网格自动行：自动；
栅隙：20px；
}
.首先，
第二
第三
.第五，
.第六，
.第七{
背景颜色：粉红色；
}
.首先，
.第二{
网格行：1/3；
}
.第四{
背景颜色：黄色；
}

1.
2.
3.
4.
5.
6.
7.

这就是你想要的吗

您可以阅读有关网格行的更多信息

运行代码段以查看其在下面的工作情况

.container{
宽度：700px；
高度：700px；
显示：网格；
网格模板列：重复（3，1fr）；
网格自动行：自动；
栅隙：20px；
}
.首先，
第二
第三
.第五，
.第六，
.第七{
背景颜色：粉红色；
}
.首先，
.第二{
网格行：1/3；
}
.第四{
背景颜色：黄色；
}

1.
2.
3.
4.
5.
6.
7.

您可以尝试以下方法：

.container{
宽度：700px；
高度：700px；
显示：网格；
网格模板列：重复（3，1fr）；
网格自动行：自动；
栅隙：20px；
}
.首先，
第二
第三
.第四，
.第五，
.第六，
.第七{
宽度：100%；
身高：100%；
背景颜色：粉红色；
}
.首先，
.第二{
网格行：1/3；
}
第二
.第六{
}
.第四{
背景颜色：黄色；
}

1.
2.
3.
4.
5.
6.
7.

您可以尝试以下方法：

.container{
宽度：700px；
高度：700px；
显示：网格；
网格模板列：重复（3，1fr）；
网格自动行：自动；
栅隙：20px；
}
.首先，
第二
第三
.第四，
.第五，
.第六，
.第七{
宽度：100%；
身高：100%；
背景颜色：粉红色；
}
.首先，
.第二{
网格行：1/3；
}
第二
.第六{
}
.第四{
背景颜色：黄色；
}

1.
2.
3.
4.
5.
6.
7.

Sry如果我不清楚-我不希望框1和5以及框2和框6之间有空格（空行），但希望前两列的顶行高度为

3fr

。问题是我在行中有扩展内容（这些框仅用于演示目的）。我可能只是让内容以固定的高度在行上展开，但这看起来非常糟糕，因为布局使用相对单位（分数）来适应大小调整…@MihaŠušteršIč更新了答案-是吗？你需要编辑你的问题，以及你在哪里告诉最终定位像这样。问题中的图像正是我所做的，但你所说的不同。我编辑了原始片段和图像。以非母语人士的身份解释版面很难…@MihaŠušteršič抱歉我很忙。我明白你对这个问题的意思。很高兴你找到了解决办法。我也更新了我的答案。Sry如果我不清楚-我不希望框1和5以及框2和框6之间有空格（空行），但希望前两列的顶行高度为

3fr

。问题是我在行中有扩展内容（这些框仅用于演示目的）。我可能只是让内容以固定的高度在行上展开，但这看起来非常糟糕，因为布局使用相对单位（分数）来适应大小调整…@MihaŠušteršIč更新了答案-是吗？你需要编辑你的问题，以及你在哪里告诉最终定位像这样。问题中的图像正是我所做的，但你所说的不同。我编辑了原始片段和图像。以非母语人士的身份解释版面很难…@MihaŠušteršič抱歉我很忙。我明白你对这个问题的意思。很高兴你找到了解决办法。我也更新了我的答案。Sry，我编辑了第一篇文章和示例中我的意图不明确的问题。不过我很感激你的努力。宽度：100%；身高：100%；可以删除，对齐默认为Stretchry，我在第一篇文章和示例中编辑了我的意图不明确的问题。不过我很感激你的努力。宽度：100%；身高：100%；可以删除，默认情况下对齐为拉伸