Question

假设我具有这样的结构：

parent
 -div_child1
 -div_child2
 -div_child3
 -div_child4

parent的网格样式如下：

grid-template-areas:
"a b"
"c c";

但是，孩子的数量可以有所不同，并且至少为3 ，因此，为了使孩子3的全部内容符合以下样式： https://i.imgur.com/hchkHlH.jpg

我不得不强迫最后一行具有相同定义的列名。当有更多的孩子时，就会出现问题。我现在无法将它们放在单独的单元格中，因此我将它们全部放在grid c中，这导致了我似乎找不到任何解决方法的重叠问题。老实说，我很乐意让他们互相尊重彼此的宽度，这对我来说就足够了。

我认为有2种可能的解决方案：

如果子项多于3个，请定义更多列并将其分开放置。这将起作用，但是由于我无法将child3分配给多个命名的gird-areas来占用全部行空间，所以我也无法让3个孩子使用这种情况，也无法以某种方式将它们隐藏在该子代码块中，因此第三个单元格可以占用该行的剩余空间。
但是有一种方法可以在网格单元格中对齐多个项目。我从没找到任何相关信息。

示例：
有3个孩子：https://www.w3schools.com/code/tryit.asp?filename=G4QC3C4YA3HS
父母相同，但有4个孩子：https://www.w3schools.com/code/tryit.asp?filename=G4QC5VAA6J4E（重叠问题）

记住：我无法在不同情况下更改父级，其内容/子级会自动填充！