Building a Simple Layout Using CSS Grid
Learn to create a layout using the CSS grid.
We'll cover the following...
So far, we’ve discussed CSS grids in detail. Now, it should be obvious that we’ll have an easy time recreating the following simple layout:
We'll start with a wrapper:
<div class="gridWrapper">
<!-- all our grid items will go here -->
</div>
Next, let’s add four elements:
Press + to interact
<div class="gridWrapper"><div class="header">header</div><div class="sidebar">aside</div><div class="main">main</div><div class="footer">footer</div></div>
Here’s the HTML, CSS, and the corresponding output:
This is not exactly what we had in mind. We're missing something. First, let’s see how to expand the header to fit the entire top area of our layout.