Html 如何在网格区域模板中将item1放在第一行，将item2放在第二行？

.item1{
网格区域：myArea1；
}
.项目2{
网格区域：myArea2；
}
.网格容器{
显示：网格；
网格模板区域：“myArea1 myArea1..”；
网格模板区域：“myArea2 myArea2”；
栅隙：10px；
背景色：#2196F3；
填充：10px；
}
.grid容器>div{
背景色：rgba（255、255、255、0.8）；
文本对齐：居中；
填充：20px0；
字体大小：30px；
}

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

您的CSS中有一些错误

首先，您似乎需要5列，但这只定义了4列

grid-template-areas: 'myArea1 myArea1 . . ' ;

应该是

grid-template-areas: 'myArea1 myArea1 . . .;

然后，第二个区域行覆盖了第一个语句，，这就是为什么原来您的

item1

放错了位置

你所追求的是：

.item1{
网格区域：myArea1；
}
.项目2{
网格区域：myArea2；
}
.网格容器{
显示：网格；
网格模板列：重复（5，1fr）；
网格自动行：自动；
网格模板区域：
“myArea1 myArea1…”
“myArea2 myArea2…”；
栅隙：10px；
背景色：#2196F3；
填充：10px；
}
.grid容器>div{
背景色：rgba（255、255、255、0.8）；
文本对齐：居中；
填充：20px0；
字体大小：30px；
}

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

请告诉

首先，您似乎需要5列

哪段代码显示需要5列。您的链接指定有5列。。。第1项被称为“myArea”，将占据所有五列的位置：“也许你改变了你的需求？好吧，事实上，这句话就是从那个链接来的。”。我还没写呢。我不完全明白他们在那里干什么<代码>网格模板区域：“myArea1 myArea1..”我特意编写了它，因为我认为这是让item1跨越4列的方法。和item2跨越两列。而且它们没有在那里显示任何

repeat

函数。请展示如何像他们展示的那样实现这一目标——不要重复。另外，感谢您展示了使用repeat执行此操作的新方法。