html - CSS GRID - 具有空单元格和自动放置的网格模板区域

Question

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

我需要让第一行仅显示 2 个元素(第一个在网格的左侧，第二个在右侧)。我使用 10 个句点将它们与空单元格分开。

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

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

此外，当我尝试对剩余的单元格使用 auto grid-area 属性以便它们可以自动填充第 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;
}

<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>

非常感谢

Answer 1

使用带有隐式网格的 grid-template-areas 属性，grid auto placement algorithm将在创建新行之前查找未占用的单元格以进行填充(有关更多详细信息，请参见底部)。

只需指定您想要的:

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

<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>

Grid Item Placement Algorithm 中有五个主要步骤(0-4).

第一步是定位未自动定位的网格元素。这会优先考虑您指定位置的元素。

过程中的最后是定位剩余的网格项，它是这样说的:

The auto-placement cursor defines the current "insertion point" in the grid, specified as a pair of row and column grid lines. Initially the auto-placement cursor is set to the start-most row and column lines in the implicit grid.

本节还解释了为什么您的自动放置元素从第 1 行第 2 列开始:

If the item has an automatic grid position in both axes:

Increment the column position of the auto-placement cursor until either this item’s grid area does not overlap any occupied grid cells, or the cursor’s column position, plus the item’s column span, overflow the number of columns in the implicit grid, as determined earlier in this algorithm.