<div class="page">
	<div class="item header">Header</div>
	<div class="item menu">Menu</div>
	<div class="item main">Main</div>
	<div class="item right">Right</div>
	<div class="item footer">Footer</div>
</div>
.page {
	display: grid;
	padding: 10px;
	font-family: Arial, sans-serif;
	grid-gap: 10px;
	grid-template-areas:
		'header header header header header header'
		'menu main main main right right'
		'menu footer footer footer footer footer';
	background-color: #eee;
}

.item {
	padding: 10px 0;
	text-align: center;
	background-color: #ccc;
}

.header { grid-area: header; }
.menu { grid-area: menu; }
.main { grid-area: main; }
.right { grid-area: right; }
.footer { grid-area: footer; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.