是否可以使用“ grid-template-areas”从网格中的空行中删除高度？

Question

我有一个包含八张（或更少）卡的网格。我希望将卡片自动放置在网格中，而不知道它们的宽度和高度。也就是说，宽度和高度应以网格样式指定。当我显示所有8张卡时，它很好用。示例：

grid-template-areas:
    'card-1 card-1 card-2'
    'card-3 card-4 card-5'
    'card-3 card-6 card-5'
    'card-7 card-8 card-8';
grid-template-rows: 20px 20px 20px 20px;
grid-template-columns: 20px 20px 20px;

body {
  background: white;  
}

.grid {
  display: grid;
  grid-template-areas:
     'card-1 card-1 card-2'
     'card-3 card-4 card-5'
     'card-3 card-6 card-5'
     'card-7 card-8 card-8';
  grid-template-rows: 20px 20px 20px 20px;
  grid-template-columns: 20px 20px 20px;
  grid-gap: 5px;
  background: black;
}

.card-1 {
  grid-area: card-1;
  background: red;
}

.card-2 {
  grid-area: card-2;
  background: orange;
}

.card-3 {
  grid-area: card-3;
  background: yellow;
}

.card-4 {
  grid-area: card-4;
  background: green;
}

.card-5 {
  grid-area: card-5;
  background: cyan;
}

.card-6 {
  grid-area: card-6;
  background: blue;
}

.card-7 {
  grid-area: card-7;
  background: indigo;
}

.card-8 {
  grid-area: card-8;
  background: gray;
}

<div class="grid">
  <div class="card-1"></div>
  <div class="card-2"></div>
  <div class="card-3"></div>
  <div class="card-4"></div>
  <div class="card-5"></div>
  <div class="card-6"></div>
  <div class="card-7"></div>
  <div class="card-8"></div>
</div>

但是，当卡数小于8时会出现问题。网格的最后一行没有被卡所占据，但它的高度仍然是：

body {
  background: white;  
}

.grid {
  display: grid;
  grid-template-areas:
     'card-1 card-1 card-2'
     'card-3 card-4 card-5'
     'card-3 card-6 card-5'
     'card-7 card-8 card-8';
  grid-template-rows: 20px 20px 20px 20px;
  grid-template-columns: 20px 20px 20px;
  grid-gap: 5px;
  background: black;
}

.card-1 {
  grid-area: card-1;
  background: red;
}

.card-2 {
  grid-area: card-2;
  background: orange;
}

.card-3 {
  grid-area: card-3;
  background: yellow;
}

.card-4 {
  grid-area: card-4;
  background: green;
}

.card-5 {
  grid-area: card-5;
  background: cyan;
}

.card-6 {
  grid-area: card-6;
  background: blue;
}

.card-7 {
  grid-area: card-7;
  background: indigo;
}

.card-8 {
  grid-area: card-8;
  background: gray;
}

<div class="grid">
  <div class="card-1"></div>
  <div class="card-2"></div>
  <div class="card-3"></div>
  <div class="card-4"></div>
</div>

我可以通过删除网格模板区域，用grid-auto-rows替换grid-template-rows以及用grid-row + grid-column替换网格区域来解决此问题：

body {
  background: white;  
}

.grid {
  display: grid;
  grid-auto-rows: 20px;
  grid-template-columns: 20px 20px 20px;
  grid-gap: 5px;
  background: black;
}

.card-1 {
  grid-row: 1;
  grid-column: 1 / 3;
  background: red;
}

.card-2 {
  grid-row: 1;
  grid-column: 3;
  background: orange;
}

.card-3 {
  grid-row: 2 / 4;
  grid-column: 1;
  background: yellow;
}

.card-4 {
  grid-row: 2;
  grid-column: 2;
  background: green;
}

.card-5 {
  grid-row: 2 / 4;
  grid-column: 3;
  background: cyan;
}

.card-6 {
  grid-row: 3;
  grid-column: 2;
  background: blue;
}

.card-7 {
  grid-row: 4;
  grid-column: 1;
  background: indigo;
}

.card-8 {
  grid-row: 4;
  grid-column: 2 / 4;
  background: gray;
}

<div class="grid">
  <div class="card-1"></div>
  <div class="card-2"></div>
  <div class="card-3"></div>
  <div class="card-4"></div>
</div>

但是这种方法不是很方便。请帮忙，是否可以使用网格模板区域并以网格样式指定宽度和高度来做我想做的事情？ （使用级联为网格的子级指定宽度和高度也是不可接受的）

Answer 1

您可以继续使用grid-colum / grid-row，但可以像下面那样简化代码，以防HTML代码中的代码顺序总是很好：

.grid {
  display: grid;
  grid-auto-rows: 20px;
  grid-auto-flow: dense; /*to make sure we fill all the space (not mandatory)*/
  grid-template-columns: 20px 20px 20px;
  grid-gap: 5px;
  background: black;
  margin:5px;
}
/*only need this*/
.card-1,.card-8 {
  grid-column:span 2;
}
.card-3,.card-5 {
  grid-row:span 2;
}
/**/

.card-1 {background: red;}
.card-2 {background: orange;}
.card-3 {background: yellow;}
.card-4 {background: green;}
.card-5 {background: cyan;}
.card-6 {background: blue;}
.card-7 {background: indigo;}
.card-8 {background: gray;}

<div class="grid">
  <div class="card-1"></div>
  <div class="card-2"></div>
</div>

<div class="grid">
  <div class="card-1"></div>
  <div class="card-2"></div>
  <div class="card-3"></div>
  <div class="card-4"></div>
</div>

<div class="grid">
  <div class="card-1"></div>
  <div class="card-2"></div>
  <div class="card-3"></div>
  <div class="card-4"></div>
  <div class="card-5"></div>
  <div class="card-6"></div>
</div>

<div class="grid">
  <div class="card-1"></div>
  <div class="card-2"></div>
  <div class="card-3"></div>
  <div class="card-4"></div>
  <div class="card-5"></div>
  <div class="card-6"></div>
  <div class="card-7"></div>
  <div class="card-8"></div>
</div>