<div class="wrapper">
	<header class="header">
		<h1>Logo</h1>
		<nav class="navigation">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Projects</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>		
	</header>
	<section class="middleContainer">
		<div class="left">
			<h3>Useful Links</h3>
			<ul>
				<li><a href="https://cssdude.com">CSS Dude</a></li>
				<li><a href="https://smashingmagazine.com">Smashing Magazine</a></li>
				<li><a href="https://css-tricks.com">CSS Tricks</a></li>
				<li><a href="http://tympanus.net/codrops">Codrops</a></li>
			</ul>
		</div>
		<div class="midddle">
			<h2>Welcome to Webpage</h2>
		<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p><p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose.</p>
			<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections".</p>
		</div>
		<div class="right">
			<div class="box one">
				There are many variations of passages of Lorem Ipsum available.
			</div>
			<div class="box one">
				Randomised words which don't look even slightly believable.
			</div>
			<div class="box one">
				The majority have suffered alteration in some form.
			</div>
		</div>
	</section>
	<footer class="footer">&copy; CSS Grid 3Columns Template</footer>
</div>
:root{	
  --ff-family: Arial, sans-serif;
	--fs-xl: 2rem;
	--fs-l: 1.6rem;
	--fs-md: 1rem;
	--fs-s: 0.8rem;

	--color-bg: #fff;
	--color-primary: #DE0E42;
	--color-secondary: #20126F;
	--color-content: #000;
	--color-ascent: #524f4f;
	--color-alt: #f7f8ff;

	--max-width: 990px;
}
body{
	margin: 0;
	padding: 0;
	font: normal 18px/1.6 Arial;
}
*,
*:before,
*:after{
	margin: 0;
	padding: 0;
	list-style: none;
}
h1, h2, h3, h4, h5, ul, li, p{
	margin: 0 0 1.5em 0;
	padding: 0;
}
h1{
	font-size: var(--fs-xl);
}
h2{
	font-size: var(--fs-l);
}
h3{
	font-size: var(--fs-md);
}
a{
	color: var(--color-primary);
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
.wrapper{
	max-width: var(--max-width);
	margin: 0 auto;
}

.header{
	color: var(--color-bg);
	background: var(--color-secondary);
	padding: 0.5em 2em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	margin: 0 0 2em 0;
}
.header h1{
	margin: 0;
}
.navigation{
	position: relative;
	top: 10px;
}
.navigation ul {
	display: flex;
	justify-content: space-between;
}

.navigation ul li {
	font-size: var(--fs-md);
	margin: 0 0 0 1.5em;
}
.navigation ul li a{
	color: var(--color-bg);
}

.middleContainer{
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-gap: 40px;
}
.left h3{
	background: var(--color-alt);
	color: var(--color-content);
	padding: 0.4em 1em;
}

.left ul li{
	margin: 0 0 0.8em 0;
	padding: 0 0 0 0.5em;
	border-bottom: 1px solid var(--color-alt);
}
.right .box{
	padding: 1em;
	background: var(--color-alt);
	font-size: var(--fs-md);
	margin: 0 0 1.5em 0;
}
.footer{
	background: var(--color-alt);
	text-align: center;
	padding: 1em 0;
}

@media (max-width: 768px) {
	.header h1{
		font-size: var(--fs-md);
			line-height: 1;
	}
	.middleContainer{
		display: block;
		padding: 1.5em;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.