Welcome to Part-6 of the series. You can find Part-5 here.

In part-4 of the series, we used grid-column and grid-row concept to place items. In this part we will use another powerful concept of Grid known as Grid Template Areas to place items.

We will use this codepen for the tutorial. The basic code use for this tutorial is below.

<div class="container">
<div class="item item1">
<p>I'm Sidebar #1</p>
</div>
<div class="item item2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.</p>
<p>Lorem ipsum d</p>
</div>
<div class="item item3">
<p>I'm Sidebar #2</p>
</div>
<div class="item footer">
<p>I'm the footer</p>
</div>
</div>

Which is below. We basically want to have a 2 sidebars, a main content and a footer.

The basics

You can read the rest of the article from my blog site. The link for the same is below.

You can find part-7 here.

UI Lead- ReactJS, JavaScript and everything in-between.