Html 如何为特定CSS网格项创建完美的正方形？

我正在尝试构建一个网格布局，其中只有左上角、右上角、左中角和右中角的容器构成一个完美的正方形，而其他所有内容都应该占据左侧的空间。我看到了使用“填充技巧”和伪元素来解决这个问题的解决方案，但前提是所有元素都必须保持特定的纵横比

.grid容器{
显示：网格；
高度：100vh；
宽度：100%；
网格模板柱：0.5fr 0.5fr 1.5fr；
网格模板行：7rem 0.5fr 0.5fr 2fr；
差距：1勒姆；
}
.grid容器>*{
背景色：#4545；
}
.网格标题{
网格面积：1/1/2/4；
}
.左上角{
网格面积：2/1/3/2；
}
.右上角{
网格面积：2/2/3/3；
}
.左中{
网格面积：3/1/4/2；
}
.中右翼{
网格面积：3/2/4/3；
}
.左下角{
网格面积：4/1/5/3；
}
.右下角{
网格面积：2/3/5/4；
}

---

如果将行设置为自动高度，则可以使用填充技巧

.grid容器{
显示：网格；
高度：100vh；
宽度：100%；
网格模板柱：0.5fr 0.5fr 1.5fr；
网格模板行：7rem auto 2fr；
差距：1勒姆；
}
.grid容器>*{
背景色：#4545；
}
.网格标题{
网格柱：1/-1；
}
.左上：：之前，
.左中：：之前{
内容：“；
显示：内联块；
填充顶部：100%；
}
.左下角{
网格面积：4/1/5/3；
}
.右下角{
网格面积：2/3/5/4；
}
身体{
保证金：0；
}

非常感谢！如果我想让它有响应性，我必须为每个特定断点“手工制作”新的网格，对吗？所以，我想，在这个设置中自动流动不会让我有任何进展。@Chris它已经响应了，不是吗？是的，但我的意思是，如果我想让右下角的容器位于移动设备上所有其他网格项目的下方，我就必须重组网格？@Chris啊，是的，您只需使用媒体查询定义模板，并根据新模板调整变量。使用填充技巧应该很容易，因为你不需要做任何事情。很酷，你的回答太快了，太神奇了——谢谢你。我将在这里做一点实验。