title: How to use grid-row-align and grid-column-align?
body: <p>I am experimenting with <code>display: grid;</code> and do not understand how <code>grid-row-align</code> and <code>grid-column-align</code> work. <a href="https://css-tricks.com/almanac/properties/g/grid-row-column-align/" rel="nofollow noreferrer">Some documentation</a> states that (<em>EDIT: this link is now gone, probably after I posted a comment pointing to Michael_B's answer below</em>) </p>
  
  <blockquote>
    <p>The <code>grid-row-align</code> property defines the vertical alignment within
    the row while <code>grid-column-align</code> defines the horizontal alignment
    within the column.</p>
  </blockquote>
  
  <p>My understanding is that this is a property which must be set in the container of the impacted element (but I also tried to put it in the rules for the element itself). Specifically I expected that in the following code, the word <code>hello</code> would be centered both horizontally and vertically in his box.</p>
  
  <p><strong>What is the correct usage of these properties?</strong></p>
  
  <p><em>Note: I am using Chrome 58, which according to the compatibility matrix is OK.</em></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>#container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    height: 300px;
    width: 300px;
    border-style: solid;
    border-width: 1px;
    grid-row-align: center;
    grid-column-align: center;
  }
  #box-1 {
    grid-column: 1;
    grid-row: 1;
    border-style: solid;
    border-width: 1px;
    /* I also tried to put them here
    grid-row-align: center;
    grid-column-align: center;
    */
  }
  #box-2 {
    grid-column: 1;
    grid-row: 2;
    border-style: solid;
    border-width: 1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="box-1"&gt;
      hello
    &lt;/div&gt;
    &lt;div id="box-2"&gt;
      world
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>