Basic HTML5 Structure with CSS Grid Layout

Using the Grid Layout property for web pages has greatly simplified building flexible structures, from the simplest to the most complex, with just a few lines of code.

As an example, let’s set up a basic structure for a web page.

HTML

				
					<main class="wrapper">
    <header class="header">HEADER</header>
    <section class="content">CONTENT</section>
    <aside class="sidebar">SIDEBAR</aside>
    <footer class="footer">FOOTER</footer>
</main>

CSS

				
					.wrapper{
  height:500px;
  display:grid;
  grid-template-areas: 'header header'
                       'content sidebar'
                       'footer footer';
  grid-template-columns: auto 20%;
  grid-template-rows: 25% 50% 25%;
}

section,
header,
aside,
footer{
  border:1px solid #ccc;
  background:#eee;
  padding:20px;
  text-align:center;
  font-family: Arial;
  display:flex;
  justify-content:center;
  align-items:center;
}
For the post, I’ve simplified the style code in CSS, but you can also view it in SCSS in my GitHub repository, as well as a demo on Github Pages
Facebook
Twitter
LinkedIn