title: How does css grid layout works
body: <p>I was wondering how does the Css grid layouts. I thought I was getting close to understand it until I tried this below.</p>
  
  <p>I thought it would make the item 5 go behind the 3 since it has no position defined in the grid, but instead it went after the item 3, what is the behaviour behind it?</p>
  
  <p><a href="https://codepen.io/anon/pen/GOPvXO" rel="nofollow noreferrer">https://codepen.io/anon/pen/GOPvXO</a>\</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>html, body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrapper{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px 50px;
  }
  
  .wrapper div{
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: white;
  }
  
  .wrapper div:nth-child(1){
    background-color: blue; 
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .wrapper div:nth-child(2){
    background-color: red;
  }
  .wrapper div:nth-child(3){
    background-color: green;
    grid-column-start: 2;
    grid-column-end: 3;
  }
  .wrapper div:nth-child(4){
    background-color: lightblue;
      grid-column-start: 2;
      grid-row-end: 4;
  }
  .wrapper div:nth-child(5){
    background-color: pink;
  }
  .wrapper div:nth-child(6){
    background-color: lightgreen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div&gt;1&lt;/div&gt;
    &lt;div&gt;2&lt;/div&gt;
    &lt;div&gt;3&lt;/div&gt;
    &lt;div&gt;4&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
    &lt;div&gt;6&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>