title: Vertical align inside CSS grid
body: <p>I would like to have a giant progressbar which is vertically aligned inside a CSS grid.</p>
  
  <p>The problem is, vertical alignment inside CSS grid is not working for me.  I tried on Firefox, and also on Chrome.</p>
  
  <p>I tried <code>vertical-align: middle</code>, but it is not working. I have put a Flexbox inside the grid item, but still it is not working.</p>
  
  <p>Here is my minimal example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    display: grid;
    border-style: solid;
    border-color: red;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 10px;
    width: 100vw;
    height: 100vh;
  }
  
  .one {
    border-style: solid;
    border-color: blue;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  
  .two {
    border-style: solid;
    border-color: yellow;
    grid-column: 1 / 3;
    grid-row: 2 / 4;
  }
  
  .three {
    border-style: solid;
    border-color: violet;
    grid-column: 1;
    grid-row: 4 / 5;
  }
  
  .four {
    border-style: solid;
    border-color: aqua;
    grid-column: 2;
    grid-row: 4 / 5;
  }
  
  progress {
    width: 100%;
    background-color: #f3f3f3;
    border: 0;
    height: 2em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="one"&gt;One&lt;/div&gt;
    &lt;div class="two"&gt;
      &lt;div class="vertical"&gt;
        &lt;progress max="100" value="80"&gt;
              &lt;div class="progress-bar"&gt;
                &lt;span style="width: 80%;"&gt;Progress: 80%&lt;/span&gt;
              &lt;/div&gt;
            &lt;/progress&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="three"&gt; Three&lt;/div&gt;
    &lt;div class="four"&gt;Four&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>A demo:
  <a href="https://codepen.io/anon/pen/OOpdPW" rel="noreferrer">https://codepen.io/anon/pen/OOpdPW</a></p>
  
  <p>How do I align the progressbar vertically (inside its grid item) of the above demo project?</p>