Aligning grid columns

I am trying to create a blog template. section#header is made using flexbox. section.main is made with css grid.

The issue is with div.most-read (I've changed it's bg to red). I was expecting it to be 20px(grid-gap) under div.ad, 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.

See the code below:

: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>* {
  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;
}

<!--Header-->
<section id="header">
  <header>
    <h1>Blog</h1>
    <ul class="nav">
      <li><a href="#">anchor</a></li>
      <li><a href="#">anchor</a></li>
      <li><a href="#">anchor</a></li>
    </ul>
  </header>
  <div class="tags">
    <ul>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id="main">
  <div class="latest">
  </div>
  <div class="ad"></div>
  <div class="most-read"></div>
</section>

Solution

grid is drawn rows by rows and columns by columns, to allow .most-read to climb up, you actually need .latest to span across at least 2 rows to include 2 elements aside (2 rows).

you can add : grid-row: 1 / span 2; or grid-row: auto / span 2; to .latest

: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 > *{
  background-color: var(--section-bg);
}
.latest{
  height: 80em;
  grid-column: 1 /4;
  grid-row: 1 / span 2;
}
.ad{
  height: 25em;
  grid-column: 4 / 5;
}
.most-read{
  height: 55em;
  grid-column: 4 / 5;
  background-color: red !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--CSS-->
  <link rel="stylesheet" href="/style.css">
  <!--Google Fonts-->
  <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
  <title>Document</title>
</head>
<body>
  <!--Header-->
  <section id="header">
    <header>
      <h1>Blog</h1>
      <ul class="nav">
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
        <li><a href="#">anchor</a></li>
      </ul>
    </header>
  <div class="tags">
    <ul>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
      <li><a href="">Anchor</a></li>
    </ul>
  </div>
</section>
<!--Main-->
<section id="main">
  <div class="latest">
  </div>
  <div class="ad"></div>
  <div class="most-read"></div>
</section>
</body>
</html>

An easy reminder about grid https://css-tricks.com/snippets/css/complete-guide-grid/