在 css-grid 中使用对齐项时使单元格内容填充整个单元格区域

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

期望的行为

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

实际行为

内容沿垂直轴被挤压，并且没有用颜色填充单元格。

演示

Here is the demo in 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 应用于 parent 容器，而是使用下面的 CSS 将 children 应用于所有 children，因为您正在使用 align-items使用 display:flex 到所有 children.

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