Basics of CSS Grid -6

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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store