Creating a Layout with CSS Grid
Tags: webdev, css, tutorial
Published: 2020-02-21 21:07:31

---
title: "Creating a Layout with CSS Grid"
published: true
summary: CSS Grid lets you create web page layouts without resorting to external CSS frameworks. In this tutorial you'll build a layout with CSS Grid and explore how the specification works.
tags: webdev, css, tutorial
canonical_url: https://bphogan.com/2020/02/18/css-grid-layout/
---

[CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) lets you create layouts with pure CSS, rather than relying on a third party framework.

In this tutorial you'll use CSS Grid to create a two column layout with a header and footer that looks like the following:

<figure class="post-figure">
  <a href="https://bphogan.com/2020/02/18/css-grid-layout/images/layout.1d98d42d75c3d9b84294bf73ef8789fb54a0d2b7fee4856393d5518e526438a2.png"><img src="https://bphogan.com/2020/02/18/css-grid-layout/images/layout_hu3ddfe2bf747ea91c6d58c2774beace8c_89544_700x0_resize_box_2.2f00293d3f35d66fbd1a3a37a4483c8cd5aa4d4387729e4bfe77106b8eccfd88.png"
         width="700" height="183"
         alt="The two column layout you&#39;ll create" />
    
  </a>
  <figcaption>The two column layout you&#39;ll create</figcaption>
</figure>

First, create a new HTML page with a typical HTML skeleton with a viewport for mobile devices:


```html
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My layout</title>
  </head>
  <body>
    
  </body>
</html>
```

Inside the `body` tag, add a `div` with the class `container`:

```html
<div class="container">
  
  
</div>
```

This container will hold the rest of the elements. You'll use CSS to constrain the container's width too.

Inside of the container, add code to define the page's header, navbar, main content region, a sidebar full of related links, and a footer:

```html
<div class="container">
  
  <header class="header">
    <h1>Banner</h1>
  </header>
  
  <nav class="nav">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
  </nav>
  
  <main class="main">
    <h2>Main Content</h2>
    
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
      Iste culpa vitae, sunt fugit porro magni, eos non 
      mollitia officia accusantium alias illum totam eaque 
      atque sapiente reprehenderit assumenda. Nemo, modi.
    </p>
  </main>
  
  <section class="sidebar">
    <h2>Related content</h2>
    <ul>
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Dolor</li>
    </uL>
  </section>
  
  <footer class="footer">
    <small>Copyright notice</small>
  </footer>
  
</div>
```

Each element uses an appropriate HTML sectioning element and has a class that identifies the region so you can create very specific CSS rules. You could use IDs for these, but it's a common best practice to use classes for design work and reserve IDs for elements that you'll manipulate with JavaScript. 

On small screens, the default browser styles will ensure that the content is readable. There's actually nothing you need to do to define this layout to work with small screens.

Add a `style` element to your page in the `header` section to hold the stylesheet. In a larger app you'd use an external stylesheet, but keeping everything in a single file makes this project something you can reference later:

```html
<head>
...

  <style>

  </style>
</head>

```

Inside the `style` tags, add a media query that looks for a minimum width of 700 pixels:

```css
@media only screen and (min-width: 700px)  {

  
}
```

You'll define your layout here. All screens 700 pixels and wider will use these rules, while smaller screens won't be affected. Designing for the small screen first and then adjusting things with `min-width` media queries often results in much less CSS code for you to write and maintain.

The CSS Grid specification lets you define [grid areas](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas) which you can then reference to position your elements. Inside the media query, add this code to define grid areas for your header, nav, main, sidebar, and footer elements:

```css
  /* Name your sections for your grid */
  header.header { grid-area: header; }
  nav.nav {grid-area: nav;}
  main.main { grid-area: main; }
  section.sidebar { grid-area: sidebar; }
  footer.footer { grid-area: footer; }
```

You can name the grid areas whatever you like, but in this tutorial you'll use the same name as the CSS classes.  The CSS selectors reference the element and the class, ensuring a more specific match.

Next,, define the `container` region with `display: grid`, a width, height, and margin:

```css
  .container {
    display: grid;
    width: 80%;
    margin: 0 auto;
    height: 100%;
  } 
```

Now use `grid-template-areas` to define how you want your layout to work by specifying your section names in the order you want them to appear:

```css
  .container {

   ...
   
    /* Drow your grid! */
    grid-template-areas: 
      "header header"
      "nav nav"
      "main sidebar"
      "footer footer";
    }
```

When using `grid-template-areas`, you repeat the name of the region if it spans multiple columns. In this case, the `header`, `nav`, and `footer` regions span two columns, while the `main` and `sidebar` regions each span one.

Next, define the column widths for the grid. The main content region should be twice as wide as the sidebar. Rather than use pixels to do the math, use the `fr` unit, which stands for "fractional unit". 

```css
.container {
...
    grid-template-columns: 2fr 1fr;
}
```

Now define the heights of the rows. Set the header to 100 pixels high, the navigation bar to 30 pixels high, and the footer to 80 pixels high. The main region and sidebar should take up the remaining space. so use `1fr` for that:

```css
.container {
...
    grid-template-rows: 100px 30px 1fr 80px;
}
```

The complete rule looks like this:

```css
  .container {
    display: grid;
    width: 80%;
    margin: 0 auto;
    height: 100%;, 
    
    /* Drow your grid! */
    grid-template-areas: 
      "header header"
      "nav nav"
      "main sidebar"
      "footer footer";
    
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 100px 30px 1fr 80px;

  }
```

Save your file and test it out. You'll see your two column layout.

## Conclusion

In this tutorial you created a two column layout using a small amount of code. Unlike many CSS layout libraries, CSS Grid doesn't require you to add additional HTML markup or classes. The code is cleaner and it's easier to maintain. 

You can also place grids within grids. Use the same approach you used in this article to define your inner grids. Set `display: grid` on one of the inner elements, and define your own grid regions. You can also combine CSS Grid with Flexbox, which is a great way to [style your menu](https://bphogan.com/2020/02/13/css-menu).

Like this post? Support my writing by [purchasing one of my books about software development](https://bphogan.com/books).