html5怎么空单元格,html – CSS GRID – 网格模板区域,包含空单元格和自动放置

我正在尝试使用css网格布局模块来显示12列 – 3行网格.

我需要让第一行只显示2个元素(第一行在网格的左侧,第二行在右侧).

我使用10个周期将它们与空单元分开.

然后我需要以下行自动显示剩余的元素.

我决定使用网格模板区域来更好地控制定位,但可能不是最好的方法,因为我似乎必须为所有元素提供特定的网格区域名称.

此外,当我尝试将自动网格区域属性用于剩余单元格以便它们可以自动填充第3行时,它们似乎填充了第一行中的空单元格.

解决这个问题最有效的方法是什么？

这是我的代码：

.grid {

display: grid;

grid-template-areas:

"elem1 . . . . . . . . . . elem2"

"elem3 elem4 elem5 elem6 elem7 elem8 elem9 elem10 elem11 elem12 elem13 elem14";

}

.elem{

text-align: center;

color: white;

}

.elem1 {

background-color: blue;

grid-area: elem1;

}

.elem2 {

background-color: red;

grid-area: elem2;

}

.elem3 {

background-color: cyan;

grid-area: elem3;

}

.elem4 {

background-color: green;

grid-area: elem4;

}

.elem5 {

background-color: magenta;

grid-area: elem5;

}

.elem6 {

background-color: blue;

grid-area: elem6;

}

.elem7 {

background-color: red;

grid-area: elem7;

}

.elem8 {

background-color: cyan;

grid-area: elem8;

}

.elem9 {

background-color: green;

grid-area: elem9;

}

.elem10 {

background-color: magenta;

grid-area: elem10;

}

.elem11 {

background-color: blue;

grid-area: elem11

}

.elem12 {

background-color: red;

grid-area: elem12;

}

.elem13 {

background-color: cyan;

grid-area: elem13;

}

.elem14 {

background-color: green;

grid-area: elem14;

}

.elem15 {

background-color: magenta;

grid-area: auto;

}

.elem16 {

background-color: green;

grid-area: auto;

}

.elem17 {

background-color: magenta;

grid-area: auto;

}

.elem18 {

background-color: cyan;

grid-area: auto;

}

.elem19 {

background-color: magenta;

grid-area: auto;

}

.elem20 {

background-color: blue;

grid-area: auto;

}

elem1

elem2

elem3

elem4

elem5

elem6

elem7

elem8

elem9

elem10

elem11

elem12

elem13

elem14

elem15

elem16

elem17

elem18

elem19

elem20

非常感谢