CSS GRID - 包含空单元格和自动放置的网格模板区域

Question

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

我需要让第1行只显示2个元素（第1行位于网格的左侧，第2行位于右侧）。 我使用10个周期将它们与空单元分开。

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

我决定选择grid-template-areas来更好地控制定位，但可能不是最佳方法，因为我似乎必须为所有元素指定一个特定的grid-area名称。

此外，当我尝试将自动 grid-area属性用于其余单元格以便它们可以自动填充第3行时，它们似乎会填充第一行中的空单元格。

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

这是我的代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="grid">
  <div class="elem elem1">
    elem1
  </div>
  <div class="elem elem2">
    elem2
  </div>
  <div class="elem elem3">
    elem3
  </div>
   <div class="elem elem4">
    elem4
  </div>
  <div class="elem elem5">
    elem5
  </div>
  <div class="elem elem6">
    elem6
  </div>
  <div class="elem elem7">
    elem7
  </div>
  <div class="elem elem8">
    elem8
  </div>
  <div class="elem elem9">
    elem9
  </div>
  <div class="elem elem10">
    elem10
  </div>
  <div class="elem elem11">
    elem11
  </div>
  <div class="elem elem12">
    elem12
  </div>
  <div class="elem elem13">
    elem13
  </div>
  <div class="elem elem14">
    elem14
  </div>
  <div class="elem elem15">
    elem15
  </div>
  <div class="elem elem16">
    elem16
  </div>
  <div class="elem elem17">
    elem17
  </div>
  <div class="elem elem18">
    elem18
  </div>
  <div class="elem elem19">
    elem19
  </div>
  <div class="elem elem20">
    elem20
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

非常感谢

Answer 1

使用带有隐式网格的_connection.hget('A', '1') 属性，grid auto placement algorithm将在创建新行之前查找要填充的未占用单元格（有关更多详细信息，请参阅底部）。

只需指定您想要的内容：

grid-template-areas

此规则会覆盖默认的自动放置过程，将最后六项放在第三行。

.elem:nth-last-child(-n + 6) {
  grid-row-start: 3;
}

.grid {
  display: grid;
  grid-template-areas: 
  	"elem1 . . . . . . . . . . elem2" 
  	"elem3 elem4 elem5 elem6 elem7 elem8 elem9 elem10 elem11 elem12 elem13 elem14";
}

/* NEW */
.elem:nth-last-child(-n + 6) {
  grid-row-start: 3;
}

.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;
}

Grid Item Placement Algorithm（0-4）中有五个主要步骤。

最初的步骤之一是定位未自动定位的网格项。这优先考虑您指定了位置的项目。

此过程中的最后一个定位剩余的网格项，其中包含：

  

自动放置光标定义了当前的“插入点”   grid，指定为一对行和列网格线。最初的   自动放置光标设置为最开始的行和列行   隐含网格。

此部分还解释了自动放置的项目从第1行第2列开始的原因：

  

如果项目在两个轴上都有自动网格位置：

     

增加自动放置光标的列位置，直到此项目的网格区域不与任何占用的网格单元重叠，或者光标的列位置加上项目的列跨度，溢出隐式网格中的列数，如在此算法的早期确定。

Answer 2

只需利用默认 grid-auto-flow:row属性，然后告诉＆＃34;第1行 - 右边＆＃34; div使用grid-column开始/结束的位置。

然后你根本不需要网格区域。

结果：

＆＃13;

＆＃13;

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row; /*typo corrected*/
}

.elem {
  text-align: center;
  color: white;
}

.elem1 {
  background-color: blue;
}

.elem2 {
  background-color: red;
  grid-column: 12/13;
}

.elem3 {
  background-color: cyan;
}

.elem4 {
  background-color: green;
}

.elem5 {
  background-color: magenta;
}

.elem6 {
  background-color: blue;
}

.elem7 {
  background-color: red;
}

.elem8 {
  background-color: cyan;
}

.elem9 {
  background-color: green;
}

.elem10 {
  background-color: magenta;
}

.elem11 {
  background-color: blue;
}

.elem12 {
  background-color: red;
}

.elem13 {
  background-color: cyan;
}

.elem14 {
  background-color: green;
}

.elem15 {
  background-color: magenta;
}

.elem16 {
  background-color: green;
}

.elem17 {
  background-color: magenta;
}

.elem18 {
  background-color: cyan;
}

.elem19 {
  background-color: magenta;
}

.elem20 {
  background-color: blue;
}

＆＃13;

<div class="grid">
  <div class="elem elem1">
    elem1
  </div>
  <div class="elem elem2">
    elem2
  </div>
  <div class="elem elem3">
    elem3
  </div>
  <div class="elem elem4">
    elem4
  </div>
  <div class="elem elem5">
    elem5
  </div>
  <div class="elem elem6">
    elem6
  </div>
  <div class="elem elem7">
    elem7
  </div>
  <div class="elem elem8">
    elem8
  </div>
  <div class="elem elem9">
    elem9
  </div>
  <div class="elem elem10">
    elem10
  </div>
  <div class="elem elem11">
    elem11
  </div>
  <div class="elem elem12">
    elem12
  </div>
  <div class="elem elem13">
    elem13
  </div>
  <div class="elem elem14">
    elem14
  </div>
  <div class="elem elem15">
    elem15
  </div>
  <div class="elem elem16">
    elem16
  </div>
  <div class="elem elem17">
    elem17
  </div>
  <div class="elem elem18">
    elem18
  </div>
  <div class="elem elem19">
    elem19
  </div>
  <div class="elem elem20">
    elem20
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以在HTML中添加一个空div。然后使用grid-template-columns布局网格，并将空div放在所需的位置。 例如：

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.spacer {
  grid-column: 2 / span 10;
}

.elem {
  text-align: center;
  color: white;
}

.elem1 {
  background-color: blue;
}

.elem2 {
  background-color: red;
}

.elem3 {
  background-color: cyan;
}

.elem4 {
  background-color: green;
}

.elem5 {
  background-color: magenta;
}

.elem6 {
  background-color: blue;
}

.elem7 {
  background-color: red;
}

.elem8 {
  background-color: cyan;
}

.elem9 {
  background-color: green;
}

.elem10 {
  background-color: magenta;
}

.elem11 {
  background-color: blue;
}

.elem12 {
  background-color: red;
}

.elem13 {
  background-color: cyan;
}

.elem14 {
  background-color: green;
}

.elem15 {
  background-color: magenta;
}

.elem16 {
  background-color: green;
}

.elem17 {
  background-color: magenta;
}

.elem18 {
  background-color: cyan;
}

.elem19 {
  background-color: magenta;
}

.elem20 {
  background-color: blue;
}

<div class="grid">
  <div class="elem elem1">
    elem1
  </div>
  <div class="spacer"></div>
  <div class="elem elem2">
    elem2
  </div>
  <div class="elem elem3">
    elem3
  </div>
  <div class="elem elem4">
    elem4
  </div>
  <div class="elem elem5">
    elem5
  </div>
  <div class="elem elem6">
    elem6
  </div>
  <div class="elem elem7">
    elem7
  </div>
  <div class="elem elem8">
    elem8
  </div>
  <div class="elem elem9">
    elem9
  </div>
  <div class="elem elem10">
    elem10
  </div>
  <div class="elem elem11">
    elem11
  </div>
  <div class="elem elem12">
    elem12
  </div>
  <div class="elem elem13">
    elem13
  </div>
  <div class="elem elem14">
    elem14
  </div>
  <div class="elem elem15">
    elem15
  </div>
  <div class="elem elem16">
    elem16
  </div>
  <div class="elem elem17">
    elem17
  </div>
  <div class="elem elem18">
    elem18
  </div>
  <div class="elem elem19">
    elem19
  </div>
  <div class="elem elem20">
    elem20
  </div>
</div>