<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 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 2 rows with the height of 1 free space
	// followed by 3 columns 100px wide.
	// grid-template: 1fr 1fr / 100px 100px 100px;
	// The Rows
	grid-template-rows: repeat(10, auto-fill);

	background: whitesmoke;
}

.child-item {
	background: #2115B6;
	color: white;
}
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.