CSS Grid Layout - General Example

<!DOCTYPE html>
<html>

<head>
<style>
    /*
============== Grid Layout ==============
*/
.item1 { grid-area: header; }
.item2 { grid-area: left; }
.item3 { grid-area: section; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
    display: grid;
    grid-gap: 10px;
    background-color: #333;
    box-shadow: inset 0 0 5px 0 #272727;
    padding: 1px;
    grid-template-areas:
        'header header header header header header'
        'left section section section section right'
        'footer footer footer footer footer footer';
}
.grid-container > div {
    background-color: #97ff99;
    text-align: center;
    padding: 30px 0;
    font-size: 16px;
}
/*
============== Grid Layout ==============
*/
</style>
</head>
<body>
<h1 class="heading">Grid Layout</h1>

<p class="description">The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning:</p>

<div class="grid-container">
    <div class="item1">Header</div>
    <div class="item2">Left</div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
</div>

</body>
</html>