css - 对齐通过网格区域强制在单元格内的项目

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这导致了我似乎无法找到任何解决方法的重叠问题。老实说，我很乐意让他们互相尊重宽度，这对我来说就足够了。

我觉得有两种可能的解决方案：

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

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

请记住：我不能针对不同的情况更改父级，它的内容/子级会自动填充！

0 回答 0