Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

Solving Problems With CSS Grid: The Gantt Chart

by
Difficulty:BeginnerLength:MediumLanguages:

We recently published a tutorial explaining how to build a JavaScript-driven Gantt Chart. I think it’s the perfect case study for CSS Grid, so in this tutorial we’ll see how well suited CSS Grid Layout is for building a flexible Gantt Chart.

Our CSS Grid Gantt Chart

Here’s what we’re building. It uses CSS Grid to lay out the labels, dividing lines, and tasks. And it uses line names to help us define the task durations in a human-readable way.

For the complete effect, check out the fullscreen version and play with its fluid layout.

If you need a quick refresher on how to use CSS Grid, this guide will get you started:

Reminder: What Exactly is a Gantt Chart?

Henry Gantt was a mechanical engineer who, in the lead up to The Great War (as it was known before the need to number them arose) was tasked with project managing the American military and munitions. This was quite a meaty undertaking, so he used his own way of visualizing all the relevant jobs, their timelines, and designated responsibilities. Ladies and gentlemen, the Gantt Chart:

gantt chart example
A detailed sketch of a Gantt chart

Right then, that’s enough preamble. Let’s build a Gantt chart with CSS Grid.

1. Begin with Some Markup

We’ll need a few elements for our chart. Look at this highly accurate diagram and all will become clear:

gantt chart markup

You can see we’ll need headers for our days, lines to divide the columns up, the tasks themselves, and probably a wrapper around the whole thing. So we’ll begin with the wrapper:

This will serve as our grid, so we’ll need to say so in our first CSS declaration (along with some other stylistic bits and pieces):

You’ll notice we’ve declared the columns for our grid here, but I’ve said we want 14 of them with repeat(14, 1fr). You might think we’d need 7 (one for each day) but I’d like each day to be split in two so we can have tasks starting and ending in the middle of the day.

Also worth noting: we’ve added grid-gap: 10px 0px; which gives us 10px of grid gap top and bottom, but nothing to the left and right. This will space out our tasks vertically.

2. Add Some Headings and Lines

Without content we’ve literally nothing to see yet, so let’s add some headings (our days) and the dividing lines.

This might look a little heavy-handed, but we’re going to be laying some elements on the same grid coordinates as others–grid’s auto-placement won’t help us with that, so we’ll need to individually select most of the items.

On the next exquisitely crafted drawing you’ll see that our headings are each spanning two columns, and the dividing lines are positioned two columns away from one another as well.

columns for our gantt grid

Our Tuesday heading, for example, is positioned on grid column line 5; so too is the dividing line between it and Monday.

Here we have some styles for our dividers, including a grid-column rule for each one to position it on the right grid line. We also need to make sure they span down all the rows we’ll need:

Next we do something similar for the headings. You’ll notice that these grid-column declarations include the span keyword to make each heading span across two columns.

Now we actually have something to look at!

3. Add Some Tasks

Our tasks are a pile of div elements. I’ve included their grid-column values inline because in a real world scenario these would probably be added to the markup somehow, rather than the stylesheets.

Without doing anything else we’ll already have these divs more or less positioned correctly on our Gantt chart. Saying that, some more styles are needed:

These styles give our tasks some basic sizing, with a media query to increase the font-size on larger screens. Next we need the styles to give each task a background color and a specific row number. Without these grid-row rules CSS Grid Layout’s auto-placement would get to work and put our tasks wherever it saw fit (not ideal).

With that done, we have ourselves a flexible Gantt chart!

4. Improvement: Name the Grid Lines

As I’ve mentioned before, it’s a good idea to give your grid lines names. Our Gantt chart is the perfect example of where that’s especially true.

When we’re positioning our tasks on the chart, having to visualize the grid line numbers is a clumsy way of doing things. It would be much easier if we could say, in a human way, at what point our tasks begin and end. 

Let’s try this:

day time names

If we use a system like this we could say that a task “starts on Tuesday midday, then finishes on Thursday morning” for example.

We’ll begin by redefining our grid, this time wrapping each of our 14 columns in a line name:

Ah, now we’re stuck. We’ve named grid line 1 sun-morning, line 2 sun-midday, and line 3 sun-night. But line 3 is actually more than just Sunday night, it’s also Monday morning, depending on how you look at it.

Luckily, we can assign more than one name to a grid line, so we’ll name it sun-night mon-morning. Continue on, naming all the lines as you go.

Now we need to change the way our tasks are positioned in the markup. We can define them all like this:

How clear is that?! Here’s what we end up with:

Conclusion

And we’re done. We’ve used CSS Grid Layout to create a flexible Gantt chart. Not only that, we made the code human-readable to make organizing the chart data even easier.

If you want to take your own Gantt chart to the next level and you need some inspiration, take a look at Phil’s concept on CodePen (it’s a beauty):

Gantt Chart Concept with CSS-Grid
Gantt Chart Concept with CSS-Grid

If you have any questions or suggestions, let us know in the comments!

More Project-Based CSS Grid Tutorials

Nothing teaches better than “doing”.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.