title: Making cell content fill entire cell area when using align-items in css-grid
body: <p>I want to use CSS Grid to do two things that seem incompatible:</p>
  
  <ol>
  <li><p><code>align-items: center;</code> I want the content of each cell centered long the vertical axis of each cell.</p></li>
  <li><p>Fill the entire available area of the cell with color. The content is squeezed along the vertical axis when I apply the property <code>align-items: center;</code> and does not fill the entire area with color.</p></li>
  </ol>
  
  <p>What am I doing wrong? How do I achieve my desired result? <a href="https://codepen.io/anon/pen/NaLoLZ?editors=1100" rel="noreferrer"><kbd>CODEPEN DEMO</kbd></a></p>
  
  <pre><code>.grid {
    align-items: center;
    /* remove align-items property to see content fill entire cell area */
  </code></pre>
  
  <h3>Desired Behavior</h3>
  
  <p>I want to fill the entire content of each cell with color.</p>
  
  <p><a href="https://i.stack.imgur.com/C2f5t.png" rel="noreferrer"><img src="https://i.stack.imgur.com/C2f5t.png" alt="enter image description here"></a></p>
  
  <h3>Actual Behavior</h3>
  
  <p>The contents are squeezed along the vertical axis and do not fill the cell with color.</p>
  
  <p><a href="https://i.stack.imgur.com/4L99T.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4L99T.png" alt="enter image description here"></a></p>
  
  <h3>Demo</h3>
  
  <p><a href="https://codepen.io/anon/pen/NaLoLZ?editors=1100" rel="noreferrer">Here is the demo in Codepen.</a></p>
  
  <h3>Code</h3>
  
  <p><a href="https://codepen.io/anon/pen/NaLoLZ?editors=1100" rel="noreferrer">https://codepen.io/anon/pen/NaLoLZ?editors=1100</a></p>
  
  .HTML
  
  <pre><code>&lt;div class="grid"&gt;
  &lt;div class="item1"&gt;item 1&lt;/div&gt;
  &lt;div class="item2"&gt;item 2&lt;/div&gt;
  &lt;div class="item3"&gt;item 3&lt;/div&gt;
  &lt;div class="item4"&gt;item 4&lt;/div&gt;
  &lt;div class="item5"&gt;item 5&lt;/div&gt;
  &lt;div class="item6"&gt;item 6&lt;/div&gt;
  &lt;div class="item7"&gt;item 7&lt;/div&gt;
  &lt;div class="item8"&gt;item 8&lt;/div&gt;
  &lt;div class="item9"&gt;item 9&lt;/div&gt;
  &lt;div class="item10"&gt;item 10&lt;/div&gt;
  &lt;div class="item11"&gt;item 11&lt;/div&gt;
  &lt;div class="item12"&gt;item 12&lt;/div&gt;
  &lt;div class="item13"&gt;item 13&lt;/div&gt;
  &lt;div class="item14"&gt;item 14&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  .CSS
  
  <pre><code>.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;
  }
  </code></pre>