Untitled

<html>
  <head>
    <style>
      /* Example of CSS Grid using grid-area and grid-template-areas */
      body {
        margin: 40px;
      }

      .wrapper {
        /* We set the display to grid which lets us define the amount and size of columns/rows we want  */
        display: grid;
        /* We want a perfect 3x3 of 100px rows and columns */
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        /* grid-gap is the actual amount of space between grid elements */
        grid-gap: 10px;
        background-color: #fff;
        color: #444;
      }

      .header {
        /* We use grid-area to label a section we can lay over a part of our grid */
        grid-area: header;
        background-color: aqua;
      }

      .main {
        grid-area: main;
        background-color: #444;
      }

      .sidebar {
        grid-area: sidebar;
        background-color: blueviolet;
      }

      .footer {
        grid-area: footer;
        background-color: limegreen;
      }

      @media (max-width: 600px) {
        .wrapper {
          /* We can map the grid-areas 1:1 to a text representation of our grid, remember it's a 3x3 of 100px boxes */
          grid-template-areas:
            'header header header' /* header is 300px wide taking up a whole row */
            'main main main'
            'footer footer sidebar'; /* footer is 200px wide, taking 2 boxes, with sidebar taking the last 100xp box */
        }
      }

      @media (min-width: 601px) {
        .wrapper {
          /* We can arbitrarily rearrange the grid areas based with media queries, also note the sidebar is spanning a column now, we are not limited to just rows */
          grid-template-areas:
            'main main sidebar' /* sidebar is 100px wide and 200px tall as it spans two rows and one column */
            'footer footer sidebar'
            'header header header';
        }
      }

      .box {
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="box header">Header</div>
      <div class="box footer">Footer</div>
      <div class="box main">Main</div>
      <div class="box sidebar">Sidebar</div>
    </div>
  </body>
</html>