The Simplest CSS Grids

CSS Grid is all the rage and for a good reason. It’s the best replacement for any of the previously existing grid solutions. And while CSS grid contains a myriad of CSS properties you can employ and become a power user, most websites fall into a handful of grid setups and I’d like to quickly go through those and provide you with a copy/pastable grid setup

The two column layout

Probably the most common website layout is the 2 column layout. It looks kind of like this:

|---------------------|
|  Header/navigation  |
|---------------------|
| Content   | sidebar |
|           |         |
|---------------------|
|        Footer       |
|---------------------|

For a layout like that, you might be tempted to write it in “rows” like so:

<div class="wrapper">
	<div class="header">Header/navigation</div>
	<div class="main">
		<div class="content">Content</div>
		<div class="sidebar">Sidebar</div>
	</div>
	<div class="footer">Footer</div>
</div>

But CSS Grid doesn’t require us to wrap the middle section in a separate div so let’s rewrite that using semantic HTML and leave the presentation to CSS:

<div class="grid">
	<header>Header/navigation</header>
	<main>Content</main>
	<aside>Sidebar</aside>
	<footer>Footer</footer>
</div>

That’s a little better. First, let’s define our grid areas:

header {
	grid-area: 'header';
}

main {
	grid-area: 'content';
}

aside {
	grid-area: 'sidebar';
}

footer {
	grid-area: 'footer';
}

This let’s us use the grid-template-areas CSS property on the grid. Let’s go ahead and define a grid for the desktop with a 2-to-1 ratio (content is 2x size of the sidebar). Let’s also make it responsive so that this grid exists only on devices with a resolution larger than 800px, otherwise, we’ll stick to a single column layout.

.grid {
	grid-template-columns: 1fr;
}

@media (width > 800px) {
	.grid {
		grid-template-columns: 2fr 1fr;
		grid-template-areas:
			'header header'
			'content aside'
			'footer footer';
	}
}

Sidebar navigation layout

The next very common layout is the sidebar navigation layout with a fixed sidebar navigation and an expanding content area. It looks kind of like this:

|---------------------|
|  Header             |
|---------------------|
| Nav |     content   |
|     |               |
|---------------------|
|        Footer       |
|---------------------|

A little different, let’s go ahead and write out the HTML for it:;

<div class="grid">
	<header>Header</header>
	<nav>Nav</nav>
	<main>Content</main>
	<footer>Footer</footer>
</div>

Not very different from the other one. Next, we need to setup our grid areas:

header {
	grid-area: 'header';
}

main {
	grid-area: 'content';
}

nav {
	grid-area: 'nav';
}

footer {
	grid-area: 'footer';
}

And lastly, let’s make sure the grid looks how we expect it, we’ll want to keep the navigation a fixed width and we’ll want to make that fixed-width smaller on smaller screens.

.grid {
	grid-template-columns: 100px 1fr;
	grid-template-areas:
		'header header'
		'nav content'
		'footer footer';
}

@media (width > 800px) {
	.grid {
		grid-template-columns: 200px 1fr;
	}
}

Dev.to’s layout

Lastly, for fun, let’s put together dev.to’s navigation layout. It’s actually a pretty common layout! You’ll notice that Twitter and Facebook follow this setup as well:

|-----------------------------------------|
|  Header                                 |
|-----------------------------------------|
| Nav |    content  | Second nav/sidebar  |
|     |             |                     |
|-----------------------------------------|

The HTML for it should look pretty familiar by now e:

<div class="grid">
	<header>Header</header>
	<nav>Nav</nav>
	<main>Content</main>
	<aside>Sidebar</aside>
</div>

Then the CSS grid areas:

header {
	grid-area: 'header';
}

main {
	grid-area: 'content';
}

nav {
	grid-area: 'nav';
}

aside {
	grid-area: 'sidebar';
}

And finally, the whole setup. Dev.to is a little more complicated than the previous examples in that it has 2 breakpoints so 3 different configurations:

1. desktop view - 3 column layout
2. tablet (?) view - 2 column layout with navigation/content visible but no sidebar
3. mobile view - 1 column layout with just content

Let’s set that up:

.grid {
	grid-template-columns: 1fr;
	grid-template-areas:
		'header'
		'content';
}

@media (width > 1024px) {
	.grid {
		grid-template-columns: 150px 1fr 150px;
		grid-template-areas:
			'header header header'
			'nav content sidebar';
	}
}

@media (width < 1024px and width > 800px) {
	.grid {
		grid-template-columns: 150px 1fr;
		grid-template-areas:
			'header header'
			'nav content';
	}
}

Note that I completely dropped sidebar from the last view which means that it won’t be visible without having to do any display: none logic.

Resources

Not familiar with CSS grid or want to know more? There are plenty of resources online you can check out, here are some of my others:

• step by step walkthrough of making a blog grid
• introduction to CSS grids video