Quick Grid Page Layout

index.html

<div class="grid">
	<header>Header</header>
	<aside>Aside</aside>
	<main>Main</main>
	<footer>Footer</footer>
</div>

quick-grid-page-layout.markdown

Quick Grid Page Layout

A Pen by James Hall on CodePen.

License.

style.scss

// Mobile first quick grid layout

@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

.grid {
	box-sizing: border-box;
	font-family: 'Righteous', cursive;
	background: linear-gradient(144deg, rgba(7,35,36,1) 0%, rgba(20,244,255,1) 100%);
	display: grid;
	height: 100vh;
	color: white;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: 100px 50px auto 50px;
	grid-template-areas: 
			"header header header"
			"sidebar sidebar sidebar"
			"main main main"
			"footer footer footer";
	
	/* Desktop */
	@media(min-width: 768px) {
		grid-template-rows: 100px auto 50px;
		grid-template-areas: 
			"header header header"
			"sidebar main main"
			"footer footer footer";
		}
	
	> * {
		padding: 20px;
		text-transform: uppercase;
	}
}

header {
	grid-area: header;
	background-color: rgba(0,0,0,.5);
}

aside {
	grid-area: sidebar;
	background-color: rgba(0,0,0,.7);
}

main {
	grid-area: main;
	background-color: rgba(0,0,0,.3);
}

footer {
	grid-area: footer;
	background-color: rgba(0,0,0,.5);
}