可以用` 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-template-area，用grid-auto-rows替换grid-template-rows，用grid-row +grid-column替换grid-area来解决这个问题：

​

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>

​