.
.
.
<nav class="grid-menu">
  I am a Menu
  <!-- from here -->
  <ul>
    <li>
      <a href="">
        Menu item
      </a>
    </li>
    <li>
      <a href="">
        Menu item
      </a>
    </li>
    <li>
      <a href="">
        Menu item
      </a>
    </li>
  </ul>
  <!-- to here -->
</nav>
<article class="grid-content">
  <!-- from here -->
  <h1>
    I am Content
  </h1>
  <div class="grid">
    <div>
      <h2>Big news today</h2>
      Quick sync win-win-win or workflow ecosystem.
    </div>
    <div class="grid-feature">
      <h2>We are really excited to announce that we will soon have an exciting
      announcement!</h2>
      We're ahead of the curve on that one we just need to put these last
      issues to bed where do we stand on the latest client ask.
    </div>
    <div>
      <h2>Currying favor performance review bench mark</h2>
      No need to talk to users, just base it on the space calculator lift and
      shift.
    </div>
    <div>
      <h2>Level the playing field</h2>
      Take five, punch the tree, and come back in here with a clear head. We
      need to follow protocol obviously, rock Star/Ninja encourage & support
      business growth yet curate.
    </div>
    <div>
      <h2>Usability closing these latest prospects </h2>
      Customer centric where do we stand on the latest client ask back of the
      net 4-blocker fast track make it look like digital, like putting socks
      on an octopus.
    </div>
    <div>
      1
    </div>
    <div>
      2
    </div>
    <div>
      3
    </div>
    <div>
      4
    </div>
    <div>
      5
    </div>
    <div>
      6
    </div>
    <div>
      7
    </div>
    <div>
      8
    </div>
  </div>
  <!-- to here -->
</article>
<aside class="grid-panel">
  I am Info
  <!-- from here -->
  <ul>
    <li>
      <a href="">
        Panel link
      </a>
    </li>
    <li>
      <a href="">
        Panel link
      </a>
    </li>
    <li>
      <a href="">
        Panel link
      </a>
    </li>
  </ul>
  <p>
    Call me Ishmael. Some years ago–never mind how long
    precisely–having little or no money in my purse, and nothing
    particular to interest me on shore, I thought I would sail about a
    little and see the watery part of the world. It is a way I have of
    driving off the spleen and regulating the circulation.
  </p>
  <!-- to here -->
</aside>
<footer class="grid-footer">
  I am a Footer
  <!-- from here -->
  <ul>
    <li>
      <a href="">
        Footer link
      </a>
    </li>
    <li>
      <a href="">
        Footer link
      </a>
    </li>
  </ul>
  <!-- to here -->
</footer>
.
.
.