<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content
    <br /> The four arrows are inline images inside the content area.
    <img src="http://gridbyexample.com/examples/code/arrow-top-left.png" alt="top left" class="topleft" />
    <img src="http://gridbyexample.com/examples/code/arrow-top-right.png" alt="top right" class="topright" />
    <img src="http://gridbyexample.com/examples/code/arrow-bottom-left.png" alt="bottom left" class="bottomleft" />
    <img src="http://gridbyexample.com/examples/code/arrow-bottom-right.png" alt="bottom right" class="bottomright" /></div>
  <div class="box footer">Footer</div>
</div>
body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
  position: relative;
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.wrapper {
		display: grid;
    grid-gap: 10px;
		grid-template-columns: 200px 200px 200px;
		grid-template-areas:
    "header  header  header"
		"sidebar content content"
		"footer  footer  footer";
		background-color: #fff;
		color: #444;
	}


.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 50px;
  font-size: 150%;
}

.header,
.footer {
  background-color: #999;
}

.topleft {
  position: absolute;
  top: 0;
  left: 0;
}

.topright {
  position: absolute;
  top: 0;
  right: 0;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 0;
}

.bottomright {
  position: absolute;
  bottom: 0;
  right: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.