Resi Dummy

by Patrick Hund

HTML

<div class="container">
  <header class="header">
    header
  </header>
  <div class="skyscraper-left">
    sky left
  </div>
  <div class="superbanner">
    superbanner
  </div>
  <div class="skyscraper-right">
    sky right
  </div>
  <main class="main-content">
    main content
  </main>
  <aside class="sidebar">
    sidebar
  </aside>
  <footer class="footer">
    footer
  </footer>
</div>

CSS

:root {
  --gutter-width: 6px;
}

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: auto 160px var(--gutter-width) 772px var(--gutter-width) 300px var(--gutter-width) 160px auto;
  grid-template-rows: 80px var(--gutter-width) 90px var(--gutter-width) 486px 300px var(--gutter-width) 235px;
  grid-template-areas: 
    "header header header header header header header header header"
    ". . . . . . . . ."
    "margin-left skyscraper-left superbanner superbanner superbanner superbanner superbanner skyscraper-right margin-right"
    "margin-left skyscraper-left . . . . . skyscraper-right margin-right"
    "margin-left skyscraper-left . main-content . sidebar . skyscraper-right margin-right"
    "margin-left . . main-content . sidebar . . margin-right"
    ". . . . . . . . ."
    "footer footer footer footer footer footer footer footer footer";
}

.header {
  background-color: lime;
  grid-area: header;
}

.skyscraper-left {
  background-color: hotpink;
  grid-area: skyscraper-left;
}

.skyscraper-right {
  background-color: hotpink;
  grid-area: skyscraper-right;
}

.main-content {
  background-color: turquoise;
  grid-area: main-content;
}

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

.superbanner {
  background-color: hotpink;
  grid-area: superbanner;
}

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