<div class="grid-container">
  <div class="grid-item header">header</div>
  <div class="grid-item aside">aside</div>
  <div class="grid-item content">content</div>
  <div class="grid-item footer">footer</div>
</div>
.grid-container {
  display: grid;
  grid-template-areas:  'header header'
                        'aside content'
                        'footer footer';
  grid-template-rows: 60px 1fr 50px;
  grid-template-columns: 150px 1fr;
  height: 250px;
  background-color: #ccc;
}

.grid-item {
  padding: 10px;
}

.header {
  grid-area: header;
  color: white;
  background-color: green;
}

.aside {
  grid-area: aside;
  background-color: yellow;
}

.content {
  grid-area: content;
  background-color: pink;
}

.footer {
  grid-area: footer;
  color: white;
  background-color: #555;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.