title: Nested grid with 2 section displays inconsistent rows sizing and overlaps elements
body: <p>I'm currently laying out a dashboard web application and decided to use nested grids.
  The idea is to have the grid display 27 raws and 5 columns. The menu (1st subgrid) should span on the first column and the rest of the columns should contain the second subgrid where the content will be displayed. Let's call it main section.</p>
  
  <p>Note: The main section doesn't necessarily need 27 rows. What is important is to have 3 grid areas span evenly from top to bottom on the 1st 2 columns of the main section. The rest 9 grid areas need to be displayed on the remaining columns of the main section as groups of 3 each to the main areas.</p>
  
  <p>The problem:
  1. However, I set up the code it seems that the rows are not equal in between the menu and main section and can't grasp why.
  2. The first the last grid areas as slots also end up overlapping with each other although I set the grid areas correctly.</p>
  
  <p>What I tried:
  1. Setting the menu to 27 raws and the main section to 9.
  2. Setting both menu and mainSection to 27 rows.
  3. Giving Slot 1 to different rows ends to test how it could align with the menu.
  4. Checking the code to any slightest typo.
  5. Other small adjustments that I can't even remember after days of frustration. I'll follow up with updates and answers should I remember any of them.</p>
  
  <p>Can someone, please, end my frustration? :(</p>
  
  <p>PS: I'm having the CSS in the HTML file since I'm coding mobile (temporary limitations) and fail to set up the HTML to recognize the CSS file.</p>
  
  <p>Code below.
  Edit: Sorry for the misalignment in the code structure. I'm coding a g-drive file on the go on phone and tablet. It seems that “tab“ key do different things between the 2 mobile platforms.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link href="css/style.css" rel="stylesheet"&gt;
      &lt;/head&gt;
  
              &lt;!--&lt;div id="appTitle"&gt;protoAccounting&lt;/div&gt;--&gt;
  
      &lt;body id="mainGrid"&gt;
          &lt;div id="menu"&gt;
  
              &lt;!--&lt;div&gt;--&gt;
                  &lt;div class="menu_Item" id="menu_home"&gt;
              &lt;div class="notify_img" id="homeLed"&gt;img&lt;/div&gt;
                                            &lt;div class="title" id"homeText"&gt;Home&lt;/div&gt;
                                            &lt;div class="submenu" id="homeSubmenu"&gt;items&lt;/div&gt;
                                          &lt;/div&gt;
                  &lt;div class="menu_Item" id="menu_input"&gt;
                                            &lt;div clss="notify_img" id="homeLed"&gt;img&lt;/div&gt;
                                            &lt;div class="title" id"homeText"&gt;Input&lt;/div&gt;
                                            &lt;div class="submenu" id="homeSubmenu"&gt;items&lt;/div&gt;
                                          &lt;/div&gt;
                  &lt;div class="menu_Item" id="menu_database"&gt;
                                            &lt;div clss="notify_img" id="homeLed"&gt;img&lt;/div&gt;
                                            &lt;div class="title" id"homeText"&gt;Database&lt;/div&gt;
                                            &lt;div class="submenu" id="homeSubmenu"&gt;items&lt;/div&gt;
                                          &lt;/div&gt;
                  &lt;div class="menu_Item" id="menu_currentMonth"&gt;
                                            &lt;div clss="notify_img" id="homeLed"&gt;img&lt;/div&gt;
                                            &lt;div class="title" id"homeText"&gt;Current month&lt;/div&gt;
                                            &lt;div class="submenu" id="homeSubmenu"&gt;items&lt;/div&gt;
                                          &lt;/div&gt;
                  &lt;div class="menu_Item" id="menu_previousMonth"&gt;
                                            &lt;div clss="notify_img" id="homeLed"&gt;img&lt;/div&gt;
                                            &lt;div class="title" id"homeText"&gt;Previous month&lt;/div&gt;
                                            &lt;div class="submenu" id="homeSubmenu"&gt;items&lt;/div&gt;
                                          &lt;/div&gt;
                  &lt;div class="menu_Item" id="menu_ato"&gt;
                                            &lt;div clss="notify_img" id="homeLed"&gt;img&lt;/div&gt;
                                            &lt;div class="title" id"homeText"&gt;AllTimeOverview&lt;/div&gt;
                                            &lt;div class="submenu" id="homeSubmenu"&gt;items&lt;/div&gt;
                                          &lt;/div&gt;
                  &lt;div class="menu_Item" id="menu_atelier"&gt;
                                            &lt;div clss="notify_img" id="homeLed"&gt;img&lt;/div&gt;
                                            &lt;div class="title" id"homeText"&gt;Atelier&lt;/div&gt;
                                            &lt;div class="submenu" id="homeSubmenu"&gt;items&lt;/div&gt;
                                          &lt;/div&gt;
                  &lt;div class="menuItem" id="investments"&gt;
                                            &lt;div clss="notify_img" id="homeLed"&gt;img&lt;/div&gt;
                                            &lt;div class="title" id"homeText"&gt;Investments&lt;/div&gt;
                                            &lt;div class="submenu" id="homeSubmenu"&gt;items&lt;/div&gt;
                                          &lt;/div&gt;
                  &lt;div class="menu_Item" id="futureNecesities"&gt;
                                            &lt;div clss="notify_img" id="homeLed"&gt;img&lt;/div&gt;
                                            &lt;div class="title" id"homeText"&gt;Future Necesities&lt;/div&gt;
                                            &lt;div class="submenu" id="homeSubmenu"&gt;items&lt;/div&gt;
                                          &lt;/div&gt;
              &lt;!--&lt;/div&gt;--&gt;
          &lt;/div&gt;
  
          &lt;div id="mainSection"&gt;
              &lt;div id="slot1"&gt;SLOT1&lt;/div&gt;
              &lt;div id="slot2"&gt;SLOT2&lt;/div&gt;
              &lt;div id="slot3"&gt;SLOT3&lt;/div&gt;
              &lt;div id="slot4"&gt;SLOT4&lt;/div&gt;
              &lt;div id="slot5"&gt;SLOT5&lt;/div&gt;
              &lt;div id="slot6"&gt;SLOT6&lt;/div&gt;
              &lt;div id="slot4"&gt;SLOT7&lt;/div&gt;
              &lt;div id="slot5"&gt;SLOT8&lt;/div&gt;
              &lt;div id="slot6"&gt;SLOT9&lt;/div&gt;
              &lt;div id="slot4"&gt;SLOT10&lt;/div&gt;
              &lt;div id="slot5"&gt;SLOT11&lt;/div&gt;
              &lt;div id="slot6"&gt;SLOT12&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  
  &lt;style&gt;
  
  body {
      font-size: 1em;
      background: silver;
  }
  
  * {
      box-sizing: border-box;
  }
  
  #mainGrid {
      border: 1px solid black;
      display: grid;
      grid-template-columns: repeat(5, [col] 20% );
  }
  
  #mainSection div {
      border: 1px dotted black;
      margin: 0;
      text-align: center;
      vertical-align: middle;
  }
  
  #menu {
      grid-area:  1 / 1 / 9 / 2;
      display: grid;
  }
  
  #menu div {
            border: 1px dotted  black;
      text-align: center;
  }
  
  #mainSection {
       grid-area: 1 / 2 / 9 / 6;
       display: grid;
  }
  
  #menu_home {
      grid-area: 1 / 1 / span 1 / span 1;
  }
  
  #menu_input {
      grid-area: 4 / 1 / span 1 / span 1;
  }
  
  #menu_database {
      grid-area: 7 / 1 / span 1 / span 1;
  }
  
  #menu_currentMonth {
      grid-area: 10 / 1 / span 1 / span 1;
  }
  
  #menu_previousMonth {
      grid-area: 13 / 1 / span 1 / span 1;
  }
  
  #menu_ato {
      grid-area: 16 / 1 / span 1 / span 1;
  }
  
  #menu_atelier {
      grid-area: 19 / 1 / span 1 / span 1;
  }
  
  #investments {
      grid-area: 22 / 1 / span 1 / span 1;
  }
  
  #futureNecesities {
      grid-area: 25 / 1 / span 1 / span 1;
  }
  
  /*mainSection area*/
  
  #slot1 {
      /*grid-area: mSlot1;*/
      grid-area: 1 / 1 / span 3 / span 2;
  }
  
  #slot2 {
      /*grid-area: mSlot1;*/
      grid-area: 1 / 3 / span 1 / span 2;
  }
  
  #slot3 {
      /*grid-area: mSlot1;*/
      grid-area: 2 / 3 / span 1 / span 2;
  }
  
  #slot4 {
      /*grid-area: mSlot1;*/
      grid-area: 3 / 3 / span 1 / span 2;
  }
  
  #slot5  {
      /*grid-area: mSlot1;*/
      grid-area: 4 / 1 / span 3 / span 2;
  }
  
  #slot6 {
      /*grid-area: mSlot1;*/
      grid-area: 4 / 3 / span 1 / span 2;
  }
  
  #slot7 {
      /*grid-area: mSlot1;*/
      grid-area: 5 / 3 / span 1 / span 2;
  }
  
  #slot8  {
      /*grid-area: mSlot1;*/
      grid-area: 6 / 3 / span 1 / span 2;
  }
  
  #slot9 {
      /*grid-area: mSlot1;*/
      grid-area: 7 / 1 / span 3 / span 2;
  }
  
  #slot10 {
      /*grid-area: mSlot1;*/
      grid-area: 7 / 3 / span 1 / span 2;
  }
  
  #slot11  {
      /*grid-area: mSlot1;*/
      grid-area: 8 / 3 / span 1 / span 2;
  }
  
  #slot12{
      /*grid-area: mSlot1;*/
      grid-area: 9 / 3 / span 1 / span 2;
  }
  
  
  &lt;/style&gt;
  
  &lt;/html&gt;
  
  </code></pre>