basic css grid

style.css

.site-header {
    grid-area: header;
  }

  .site-content {
    grid-area: content;
  }

  .widget-area {
    grid-area: sidebar;
  }

  .site-footer {
    grid-area: footer;
  }

  .site {
	background: #000;
	color: #fff;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-row-gap: 10px;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }

  @media (min-width: 550px) {

    .site {
      grid-column-gap: 2em;
      grid-row-gap: 20px;
      grid-template-columns: 2fr 4fr;
      grid-template-areas:
        "header  header"
        "content content"
        "footer footer"
    }


}