<div class="container">
		<div class="header">header</div>
		<div class="grid">
			<div class="place">1</div>
			<div class="place">2</div>
			<div class="place">3</div>
			<div class="place">4</div>
			<div class="place">5</div>
			<div class="place">6</div>
			<div class="place">7</div>
			<div class="place">8</div>
			<div class="place">9</div>
			<div class="place">10</div>
			<div class="place">11</div>
			<div class="place">12</div>
			<div class="place">13</div>
			<div class="place">14</div>
			<div class="place">15</div>
			<div class="place">16</div>
		</div>
		<div class="footer">footer</div>
	</div>
* {
	font-family: sans-serif;
	padding: 0;
	margin: 0;
}

.container {
	width: 100vw;
	height: 100vh;
	display: grid;
	grid-template-rows: 1fr 5fr 1fr;
	grid-template-columns: 2fr 5fr 2fr;
	grid-template-areas:
		"header header header"
		". grid ."
		"footer footer footer";

	.header {
		grid-area: header;
    background: #0D0;
	}
	.footer {
		grid-area: footer;
    background: #D00;
	}
	.grid {
		display: grid;
		grid-template: repeat(4, 1fr) / repeat(4, 1fr);
		grid-area: grid;
		grid-gap: .2em;
		.place {
			background: #DDD;
      display: flex;
      justify-content: center;
      align-items: center;
		}
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.