<div class="container">
	<div class="child-item">
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed soluta similique, vitae rem corporis earum officia delectus nostrum, neque tempora corrupti quod provident qui adipisci? Minus temporibus ad laudantium perspiciatis!</p>
	</div>
	<div class="child-item">
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed soluta similique, vitae rem corporis earum officia delectus nostrum, neque tempora corrupti quod provident qui adipisci? Minus temporibus ad laudantium perspiciatis!</p>
	</div>
	<div class="child-item">
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed soluta similique, vitae rem corporis earum officia delectus nostrum, neque tempora corrupti quod provident qui adipisci? Minus temporibus ad laudantium perspiciatis!</p>
	</div>
	<div class="child-item">
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed soluta similique, vitae rem corporis earum officia delectus nostrum, neque tempora corrupti quod provident qui adipisci? Minus temporibus ad laudantium perspiciatis!</p>
	</div>
	<div class="child-item">
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed soluta similique, vitae rem corporis earum officia delectus nostrum, neque tempora corrupti quod provident qui adipisci? Minus temporibus ad laudantium perspiciatis!</p>
	</div>
</div>
*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
input {
  box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	min-height: 100%;
}

img,
embed,
object,
video {
	max-width: 100%; // without it images break away from columns
	height: auto;
}

.container {
	display: grid;
	grid-gap: 10px;
	// Create the Template Areas with a height of auto.
	// Create the Template Areas with a height of 1fr
	// Create the Template Areas with a height of auto
	// Create 3 columns 200px wide, 400px wide, 200px wide
	grid-template: "header header header" auto
								 "sidebar1 content sidebar2" 1fr
								 "footer footer footer" auto / 200px minmax(300px, 1fr) 200px;
	// The bg color
	background: whitesmoke;
}

.child-item {
	background: hotpink;
	color: white;
}

.child-item:nth-child(1) {
	grid-area: header;
	background: #870093;
}

.child-item:nth-child(2) {
	grid-area: content;
	background: #A426BC;
}

.child-item:nth-child(5) {
	grid-area: footer;
	background: #870093;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.