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.

Answer 2

您可以在 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>

Answer 3

只需利用 默认值 grid-auto-flow:row 属性并告诉“第一行 - 右侧”div start/end 在哪里使用 grid-column.

那么你根本不需要网格区域。

结果：

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

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

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

CSS GRID - grid-template-areas with empty cells and auto placement

html

css

css-grid