Grid

grid.markdown

Grid

example grid

A Pen by Sergey on CodePen.

License.

index.html

<div class="page">
  <header class="header">
    Header
  </header>
  <aside class="sidebar-first">
    Sidebar First
  </aside>
  <aside class="sidebar-second">
    Sidebar Second
  </aside>
  <div class="content">
    Content
  </div>
  <footer class="footer">
    Footer
  </footer>
</div>

style.css

.page > * {
  border: 1px solid;
  text-align: center;
}

.page {
  display: grid;
  grid-template-colums:1fr 1fr 1fr 1fr;
  grid-template-rows:1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  grid-template-areas: 
    "header header header header"
    "sidebar-first content content sidebar-second"
    "sidebar-first content content sidebar-second"
    "footer footer footer footer";
}
.header {
  grid-area: header;
}
.sidebar-first {
  grid-area: sidebar-first;
}
.sidebar-second {
  grid-area: sidebar-second;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

vynxzv.markdown

VyNxZv

A Pen by Sergey on CodePen.

License.