Css 具有网格布局和网格区域的容器

您好，我正在尝试使用网格区域创建容器网格，以实现此目标：

但我很难界定父亲和孩子的领域

.grid\u布局{
显示：网格；
网格模板区域：
“a b c”
“a d e”；
栅隙：6px；
网格模板柱：1fr 1fr；
身高：100%；
}

---

您不需要模板区域来完成此任务……但您确实需要六列

.grid\u布局{
显示：网格；
栅隙：6px；
网格模板列：重复（6，1fr）；
网格模板行：自动；
宽度：80%；
保证金：1em自动；
}
.项目{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：浅绿色；
边框：1px纯绿色；
填充：1em；
}
.项目：第n个孩子（1），
.项目：第n个孩子（2），
.项目：第n个孩子（3）{
格构柱：跨度2；
}

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

您不需要模板区域来完成此任务……但您确实需要六列

.grid\u布局{
显示：网格；
栅隙：6px；
网格模板列：重复（6，1fr）；
网格模板行：自动；
宽度：80%；
保证金：1em自动；
}
.项目{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：浅绿色；
边框：1px纯绿色；
填充：1em；
}
.项目：第n个孩子（1），
.项目：第n个孩子（2），
.项目：第n个孩子（3）{
格构柱：跨度2；
}

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

如果您想使用区域，您仍然需要按照注释中的说明中继6列

.grid\u布局{
显示：网格；
网格模板区域：
“a b c c”
“d e f g h i”；
/*网格模板列：如果需要，请重复（6,1fr）*/
栅隙：6px；
高度：100%；/*100%这里是什么？家长没有设置高度*/
栅格自动流：行密集
}
img{宽度：定义的网格单元的100%；/*个*/}
第N名儿童（1）{
网格面积：a；
}
第N名儿童（2）{
网格面积：b；
}
第N名儿童（3）{
网格面积：c；
}
img:n个孩子（4）{
网格面积：d；
}
第N名儿童（5名）{
网格面积：e；
}
第n名儿童（6）{
网格面积：f；
}
第n名儿童（7）{
网格面积：g；
}
第n名儿童（8）{
网格面积：h；
}
第n名儿童（9）{
网格面积：i；
}

---

如果您想使用区域，您仍然需要按照注释中的说明中继6列

.grid\u布局{
显示：网格；
网格模板区域：
“a b c c”
“d e f g h i”；
/*网格模板列：如果需要，请重复（6,1fr）*/
栅隙：6px；
高度：100%；/*100%这里是什么？家长没有设置高度*/
栅格自动流：行密集
}
img{宽度：定义的网格单元的100%；/*个*/}
第N名儿童（1）{
网格面积：a；
}
第N名儿童（2）{
网格面积：b；
}
第N名儿童（3）{
网格面积：c；
}
img:n个孩子（4）{
网格面积：d；
}
第N名儿童（5名）{
网格面积：e；
}
第n名儿童（6）{
网格面积：f；
}
第n名儿童（7）{
网格面积：g；
}
第n名儿童（8）{
网格面积：h；
}
第n名儿童（9）{
网格面积：i；
}

首先，您需要6列，而不是3列，因为6列？我不明白它应该是“类”而不是类名你的第二行需要6列因为类名在reactjs上，你能帮我吗？首先你需要6列而不是3列，因为6？我不明白它应该是“类”而不是“类名”你的第二行需要6列因为类名在reactjs上，你能帮我吗？你好，我想到了网格区域，为什么我需要在每列下有一个小文本，所以我想到了3列，换句话说，我需要在所有框下有3个文本，你能帮我吗？@MykonSpt我会考虑

网格模板列

，而不是

区域

。我在我的答案中添加了一个片段，用一条关于

网格自动流的注释来演示这个想法。您好，我想到了网格区域，为什么我需要在每列下有一个小文本，所以我想到了3列，换句话说，我需要在所有框下有3个文本，你能帮我吗？@MykonSpt我会考虑
网格模板列
，而不是
区域
。我在回答中添加了一个片段，用一条关于
网格自动流
的注释来演示这个想法。