Making cell content fill entire cell area when using align-items in css-grid

Question

I want to use CSS Grid to do two things that seem incompatible:

1. align-items: center; I want the content of each cell centered long the vertical axis of each cell.

2. Fill the entire available area of the cell with color. The content is squeezed along the vertical axis when I apply the property align-items: center; and does not fill the entire area with color.

What am I doing wrong? How do I achieve my desired result? CODEPEN DEMO

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

Desired Behavior

I want to fill the entire content of each cell with color.

Actual Behavior

The contents are squeezed along the vertical axis and do not fill the cell with color.

Demo

Here is the demo in Codepen.

Code

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

Do not apply the align-items:center to the parent container, but to all the children using the below CSS, Since you are using align-items use display:flex to the all the children.

CSS changes:

.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