title: Aligning grid columns
body: <p>I am trying to create a blog template. <code>section#header</code> is made using <code>flexbox</code>. <code>section.main</code> is made with <code>css grid</code>. </p>
  
  <p>The issue is with <code>div.most-read</code> (I've changed it's bg to red). I was expecting it to be 20px(grid-gap) under <code>div.ad</code>, however, it appeared just below the expected place. What is wrong? Any ideas to overall code improvement? P.S. can't post due to the lack of words, so Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, saepe.</p>
  
  <p>See the code below:</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>:root {
    --light-dark: #333;
    --dark: #303030;
    --grey: #ccc;
    --main-bg: #ededed;
    --section-bg: #e2e2e2;
  }
  
  * {
    margin: 0;
    padding: 0;
    font-family: 'Arimo', sans-serif;
  }
  
  a {
    text-decoration: none !important;
  }
  
  body {
    background-color: var(--main-bg);
  }
  
  ul {
    list-style: none;
    display: flex;
  }
  
  header {
    width: 80%;
    height: 5em;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .nav a {
    font-size: 1.5em;
    color: var(--light-dark);
  }
  
  .nav li {
    padding-right: 1em;
  }
  
  .nav li:last-child {
    padding-right: 0;
  }
  
  .tags {
    width: 100%;
    height: 4em;
    background-color: var(--dark);
  }
  
  .tags ul {
    width: 80%;
    height: 100%;
    background-color: var(--dark);
    margin: 0 auto;
    padding: 0;
    align-items: center;
  }
  
  .tags li {
    padding-right: 10px;
  }
  
  .tags a {
    font-size: 1.2em;
    padding: 2px 0;
    color: var(--grey);
  }
  
  .tags a:hover {
    transition: .1s;
    border-top: 2px solid var(--grey);
    border-bottom: 2px solid var(--grey);
  }
  
  #main {
    width: 80%;
    margin: 1em auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
  }
  
  #main&gt;* {
    background-color: var(--section-bg);
  }
  
  .latest {
    height: 80em;
    grid-column: 1 /4;
  }
  
  .ad {
    height: 25em;
    grid-column: 4 / 5;
  }
  
  .most-read {
    height: 55em;
    grid-column: 4 / 5;
    background-color: red !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--Header--&gt;
  &lt;section id="header"&gt;
    &lt;header&gt;
      &lt;h1&gt;Blog&lt;/h1&gt;
      &lt;ul class="nav"&gt;
        &lt;li&gt;&lt;a href="#"&gt;anchor&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;anchor&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;anchor&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/header&gt;
    &lt;div class="tags"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=""&gt;Anchor&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Anchor&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Anchor&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Anchor&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Anchor&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Anchor&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;!--Main--&gt;
  &lt;section id="main"&gt;
    &lt;div class="latest"&gt;
    &lt;/div&gt;
    &lt;div class="ad"&gt;&lt;/div&gt;
    &lt;div class="most-read"&gt;&lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>