About this Post

Creating a basic layout with CSS Grid.


The CSS Grid spec is a two-dimensional web layout system. Content can be laid out in rows and columns. Building complex layouts becomes easy(ier) with CSS Grid, though it can be a bit tricky to get started, particularly if you're used to working with flexbox, or even floats.

Here's a simple example of a grid layout:

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }

The above code will create a grid with 3 columns and 3 rows on any element with a class of .container. The fr unit is a fraction of the available space. In the example above, each column and row will be 1/3 of the available space.

The grid-template-areas property can be used to create a grid with named areas:

.container { display: grid; grid-template-areas: 'header header header' 'main main main' 'footer footer footer'; }

Like the prior example, the above code creates a grid with 3 columns and 3 rows. Each column and row has a name. The names are arbritary (to you, the author), and can be used to position items in the grid.

The grid-area property can be used to give an item (element) a name, and by extension, position an item in the grid. The value of the property is the name of the area to position the item in.

.header { grid-area: header; }

The above code will position an element with a class of .header in the header area of the grid layout.

The grid-gap property can be used to set the space between rows and columns. The gap property is a shorthand for grid-gap.

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 1rem; }

Continuing with our prior example, the grid-gap property is used to set the space between the columns and rows to 1rem.

Let's roll with the grid-template-areas approach outline above, and create a simple layout with the corresponding HTML. The HTML will be defined by the header, main, and footer tags, so we won't need to explicitly define the class names.

<section class="container"> <header>Header</header> <main>Main</main> <footer>Footer</footer> </section>

Here's our updated CSS taking into account our HTML markup:

.container { display: grid; gap: 1rem; grid-template-areas: 'header header header' 'main main main' 'footer footer footer'; } header { grid-area: header; } main { grid-area: main; } footer { grid-area: footer; }

Header
Main Content
Footer

This doesn't seem like a big deal, particularly because this example is fairly simply, but it's a huge step forward in terms of layout.

Let's make a small change to our example HTML and CSS by adding a sidebar to the layout.

<section class="container"> <header>Header</header> <main>Main</main> <aside>Sidebar</aside> <footer>Footer</footer> </section>

This is the updated CSS:

.container { display: grid; gap: 1rem; grid-template-areas: 'header header header' 'sidebar main main' 'sidebar footer footer'; }

Header
Main Content
Footer

Now we have a layout with a sidebar navigation.

  • The sidebar is positioned in the sidebar area of the grid, and
  • The main and footer elements are positioned in the main and footer areas of the grid

If we wanted to take it to the next level, we could adjust our CSS to only place the sidebar on the left side of the layout on larger screens, and move it to the bottom of the layout on smaller screens. This is where media queries come in. I'll leave that to you to have fun with and explore.

Here are some resources and people to help get you started with learning more about CSS Grid:

Related: