在css-grid中使用align-items时使单元格内容填充整个单元格区域

Question

我想用 CSS Grid 做两件看起来不兼容的事情：

1. align-items: center; 我希望每个单元格的内容以每个单元格的垂直轴为中心。

2. 用颜色填充单元格的整个可用区域。当我应用该属性align-items: center;并且没有用颜色填充整个区域时，内容会沿垂直轴被挤压。

我究竟做错了什么？我如何达到我想要的结果？CODEPEN DEMO

.grid {
  align-items: center;
  /* remove align-items property to see content fill entire cell area */

期望的行为

我想用颜色填充每个单元格的全部内容。

实际行为

内容沿垂直轴被挤压，不会用颜色填充单元格。

演示

这是 Codepen 中的演示。

代码

https://codepen.io/anon/pen/NaLoLZ?editors=1100

.HTML

<div class="grid">
<div class="item1">item 1</div>
<div class="item2">item 2</div>
<div class="item3">item 3</div>
<div class="item4">item 4</div>
<div class="item5">item 5</div>
<div class="item6">item 6</div>
<div class="item7">item 7</div>
<div class="item8">item 8</div>
<div class="item9">item 9</div>
<div class="item10">item 10</div>
<div class="item11">item 11</div>
<div class="item12">item 12</div>
<div class="item13">item 13</div>
<div class="item14">item 14</div>

</div>

.CSS

.grid {
  align-items: center;
  /* remove align-items property to see content fill entire cell area */

  display: grid;
  grid-gap: 10px;
  grid-template-columns: 100px 100px [main-start] 1fr [main-end] 100px 100px;
  grid-template-rows: 100px [main-start] 100px 100px [main-end] 100px;  
  color: white;
  font-family: sans-serif;  
}

[class^="item"] {
  background-color: blue;
}

.item1 {
  background-color: red;
  grid-area: main;
}

Answer 1

不适用align-items:center所有的孩子们用下面的CSS，由于您使用的父容器，但align-items使用display:flex到所有的孩子们。

CSS变化：

.grid {
  /* remove align-items property to see content fill entire cell area */
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 100px 100px [main-start] 1fr [main-end] 100px 100px;
  grid-template-rows: 100px [main-start] 100px 100px [main-end] 100px;  
  color: white;
  font-family: sans-serif;  
}

[class^="item"] {
  background-color: blue;
  display:flex;
  align-items:center;
}

Codepen Demo