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
HEADER
CONTENT
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