是否可以用`Grid-Template-Areases'删除网格中空行的高度？

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;

null

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>

null

但是，当牌数少于8张时，问题就出现了。格子的最后一排没有被牌占据，但仍然有高度：

null

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>

null

我可以通过删除Grid-Template-Area，将grid-template-rows替换为grid-auto-rows，将grid-area替换为grid-row+Grid-Column来解决这个问题：

null

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>

null

但这种方法不是很方便。帮助，请，有没有可能做我想要的使用网格模板区域和指定宽度和高度的网格样式？（使用cascade指定网格子级的宽度和高度也是不可接受的）

Answer 1

您可以保留Grid-Colum/Grid-Row的使用，但要像下面这样简化代码，以防HTML代码始终保持良好的顺序：

null

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