<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content</div>
</div>
body {
  margin: 40px;
}

.sidebar {
		grid-area: sidebar;
	}

	.content {
		grid-area: content;
	}

	.header {
		grid-area: header;
	}


	.wrapper {
		display: grid;
    grid-gap: 10px;
		grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: minmax(150px, auto);
		grid-template-areas:
               "sidebar header  header"
							 "sidebar content content"
               "sidebar content content";
		background-color: #fff;
		color: #444;
	}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.header {
  background-color: #999;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.