Page content

Example using grid for site layout & flex for main page layout, which allows for any amount of columns to be laid out in a row (sidebar + page content/sidebar + page content + social/etc)

<div class="site-container grid grid--site-layout">
  <header class="header">
    Header here
  </header>
  <main class="main main--page-layout">
    Can add any items in this main content area
  </main>
  <footer class="footer">
    Footer here
  </footer>
</div>