Search⌘ K
Home
Courses
Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4

Building a Simple Layout Using CSS Grid

Explore how to build a straightforward web layout with CSS Grid by defining grid-template-areas, adjusting rows and columns, and managing element placement to create responsive, two-dimensional layouts for modern websites.

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:

HTML
<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.

Improving our layouts with grid-template-areas

...