Rough CSS Grid layout Idea

index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<header><h1 align="center">HEADER </h1></header>
<section> <div align="center"><iframe width="100%" height="315" src="https://www.youtube.com/embed/qQ__2DIydJI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <br> <strong>Music Video</strong><br>Instrumental music by Stan Williams Feat Steve Grisham (Outlaws Band) on mandolin, and Pug Baker Drums.</div></section>
<aside><img src="https://placekitten.com/170/160"></img><br>
Meowsum Lorem ipsum dolor sit amet, sit boy! &nbsp; Consectetur adipiscing elit. Aliquam efficitur at augue ac dictum. Nunc aliquam blandit nunc. Fusce dignissim libero dolor, Duis ut leo lacinia, consectetur erat eu, tempor nisl. Phasellus porttitor nulla velit, et hendrerit tortor. </aside>
<nav><br> <a target="_blank" rel="noopener noreferrer" href="https://www.stanwilliams.org/contact/">Contact Stan</a>
<br><a target="_blank" rel="noopener noreferrer" href="http://www.stanwilliamsmusic.com/">StanWilliamsMusic</a><br>
<a target="_blank" rel="noopener noreferrer" href="https://sherifrushay.com">Sheri Frushay</a><br>
<a target="_blank" rel="noopener noreferrer" href="https://www.stanwilliams.org/sources-of-media-which-are-in-the-public-domain/">Public Domain Sources</a><br>
<a target="_blank" rel="noopener noreferrer" href="https://calvinrussell.org/">CalvinRussell.org</a><br><a target="_blank" rel="noopener noreferrer" href="https://www.stanwilliams.org/videos/">Videos</a><br>
<a target="_blank" rel="noopener noreferrer" href="http://wpcode.stream/drums/">Drums With programmable Sequencer</a>
<br><a target="_blank" rel="noopener noreferrer" href="https://stan.stream">Stan.stream</a><br></nav>
<footer><div align="center"> <br>Social Sites
<!-- My social Links --->
<ul class="socials">
<li><a href="https://www.facebook.com/stanwilliamsmusic" target="_blank" class="facebook-socials" title="Follow Stan at Facebook"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://twitter.com/StansSongs" target="_blank" class="twitter-socials" title="Follow Stan at Twitter"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://twitter.com/swsitedesign" target="_blank" class="google-socials" title="swsitedesign on Twitter"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://www.linkedin.com/in/stanwilliams1" target="_blank" class="linkedin-socials" title="Follow Stan at Linkedin"><i class="fab fa-linkedin"></i></a></li>
<li><a href="https://www.github.com/stanwmusic" target="_blank" class="rss-socials" title="Follow Stan at Github"><i class="fab fa-github"></i></a></li>
	<li><a href="https://www.codepen.io/Stanssongs" target="_blank" class="rss-socials" title="Follow Stan at Codepen"><i class="fab fa-codepen"></i></a></li>
	<li><a href="https://www.youtube.com/user/Stanwilliamsmusic" target="_blank" class="rss-socials" title="Follow Stan on Yutube"><i class="fab fa-youtube"></i></a></li>
</ul>
  </div></div></footer>

rough-css-grid-layout-idea.markdown

Rough CSS Grid layout Idea

A Pen by Stan Williams on CodePen.

License.

style.css

body { 
	font-family: segoe-ui_normal,Segoe UI,Segoe,Segoe WP,Helvetica Neue,Helvetica,sans-serif;
	display: grid;
	grid-template-areas: 
    "header header header"
    "nav section aside"
    "footer footer footer";
	grid-template-rows: 90px 1fr 70px;
	grid-template-columns: 18% 1fr 18%;
	grid-gap: 5px;
  height: 100vh;
  margin: 7px;  
}

header {
	background: #707070;
	grid-area: header;
}

nav {
	background: #C9BFBF;
	grid-area: nav; 
}

section {
	background: #ABABAB;
	grid-area: section;    
}

aside {
	background: #C9C9C9;
	grid-area: aside; 
}

footer {
	background: #707070;
	grid-area: footer;
  
}

header, nav, section, aside, footer {
  
}
/* Stan's social Nav code  */
.socials a.Rss:hover{background-color:#007bb7}.socials a.Rss:{background-color:#c33}.socials a.facebook-socials:hover{background-color:#3b5998}.socials a.facebook-socials{background-color:#3b5998}.socials a.twitter-socials:hover{background-color:#3cf}.socials a.twitter-socials{background-color:#3cf}.socials a.google-socials:hover{background-color:#bd3518}.socials a.google-socials{background-color:#bd3518}.socials a.linkedin-socials:hover{background-color:#007bb7}.socials a.linkedin-socials{background-color:#007bb7}ul.socials{list-style:none;display:inline;margin-left:0!important;padding:0}ul.socials li{display:inline;margin:0 5px}.socials li a{background:#414344;border-radius:50%;display:inline-block;font-size:13px;height:30px;margin:0 auto;position:relative;text-align:center;width:30px}.socials li i{margin:0;line-height:30px;text-align:center}.socials li a:hover i,.triggeredHover{-moz-transform:rotate(359deg);-webkit-transform:rotate(359deg);-ms--transform:rotate(359deg);transform:rotate(359deg);-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .3s;-ms-transition:all .4s;transition:all .4s}.socials i{color:#fff;-webkit-transition:all .7s;-moz-transition:all .7s;-o-transition:all .9s;-ms-transition:all .9s;transition:all .9s}

Fork or preview: https://codepen.io/Stanssongs/pen/bGNeMgK