Create a Gantt chart

Written byPhuoc Nguyen

Created

23 Dec, 2023

#Adding the header

We're going to add a header to our weekly Gantt chart, which will help us track the progress of tasks for different people throughout the week. You can use the same approach to create a monthly chart if needed.

The header will have six cells. The first cell will be left empty, and it will align with the assignee of each row. The other five cells will display the weekdays of a week, starting from Monday and ending with Friday.

Here's a simple markup of the header that you can use to get started:

html

<div class="gantt">
    <!-- Header -->
    <div class="gantt__period">
        <div></div>
        <div>Mon</div>
        <div>Tue</div>
        <div>Wed</div>
        <div>Thu</div>
        <div>Fri</div>
    </div>
</div>

The Gantt chart header is set up using CSS grid. We create a grid container with the `display: grid` property and set the number and size of columns using `grid-template-columns`. In our case, we use six columns: one for the assignee name and five for each day of the week. To make sure long names or descriptions fit, we set the first column to a fixed width of 5rem.

Instead of writing out each individual column width, we use the `repeat(5, 1fr)` function. This function repeats the value `1fr` five times, creating five columns with equal width. The `1fr` unit lets us define flexible column widths that adjust based on available space. This way, our code is more concise and easier to maintain.

Here's what the CSS declarations for the header look like:

css

.gantt__period {
    display: grid;
    grid-template-columns: 5rem repeat(5, 1fr);
}

#Organizing rows

To create each row of the chart, we use two sections: one displays the assignee's name, while the other shows the tasks assigned to them.

html

<div class="gantt__row">
    <div class="gantt__assign">Assignee</div>
    <div class="gantt__tasks">
        <!-- Diplay tasks ... -->
    </div>
</div>

To achieve the desired layout, we'll use the same approach we used for the header. Specifically, we'll use the `display: grid` property to set up a grid container, and `grid-template-columns` to define the number and size of columns in the grid. In this case, we'll use two columns: one for the assignee's name and one for displaying tasks. The first column will have a fixed width of 5rem to provide enough space for long names or descriptions, while the second column will take up the remaining available space (`1fr`).

Here's an example of what the CSS declarations for each row might look like:

css

.gantt__row {
    display: grid;
    grid-template-columns: 5rem 1fr;
}

Take a look at the chart now with the header and rows included.

#Organizing tasks

The second column in each row shows the tasks with the CSS class `gantt__task`. These tasks have different variations depending on their current state, whether they are yet to be completed, already done, or overdue. You can customize the appearance of the tasks based on their states, such as by using different background colors.

html

<div class="gantt__tasks">
    <div class="gantt__task gantt__task--done">...</div>
    <div class="gantt__task gantt__task--overdue">...</div>
    <div class="gantt__task gantt__task--todo">...</div>

    <!-- More tasks ... -->
</div>

The `.gantt__tasks` CSS class is what makes the tasks section of each row look the way it does. It's responsible for creating a grid container using the `display: grid` property. We've set up the container to have five columns, one for each day of the week, using `grid-template-columns`. The `repeat(5, 1fr)` function tells the container to repeat the value `1fr` five times, which makes five columns of equal width that grow or shrink depending on the available space.

To make the tasks easier to read, we've added a small gap between each one using `grid-row-gap: 0.25rem;`.

Here's what the CSS declarations of the `.gantt__tasks` look like:

css

.gantt__tasks {
    display: grid;
    grid-row-gap: 0.25rem;
    grid-template-columns: repeat(5, 1fr);
}

#Indicating task duration

To specify how long a task should take, we use the `grid-column` property. This property indicates a grid item's size and position within the grid by specifying the start and end positions of its grid lines.

For instance, if we want to display a task that spans from Tuesday to Friday in the second row, we can set the `grid-column` property like this: `grid-column: 2 / 6;`. This means that the task will start at the second grid line of the column track and end at the sixth grid line, which correspond to Tuesday and Friday respectively.

html

<div
    class="gantt__task gantt__task--todo"
    style="grid-column: 2 / 6"
>
    ...
</div>

Specifying this property for each task allows us to visualize how long each task takes and identify any potential overlaps or gaps in the schedule. You can see a demo of this feature in the playground below.

#Making the chart easier to read

In order to make it easier for users to see the duration of each task, we will add vertical lines between the columns of the chart.

To do this, we will start by adding a new element to display the lines.

html

<div class="gantt">
    <div class="gantt__lines"></div>
</div>

To position the lines within the chart, we use absolute positioning. This allows us to layer the lines behind the chart content and ensure they don't interfere with any other elements on the page.

To create the vertical lines of the chart, we use the `.gantt__lines` CSS class. It uses `position: absolute` to position them relative to their nearest positioned ancestor, which in this case is the `.gantt` container. The `left: 0` and `top: 0` properties set the starting position of the lines at the top-left corner of their container. The lines spans the full height of its container, thanks to the `height: 100%` property. And to ensure that the lines spans across all columns of the chart, we use the `width: 100%` property.

Lastly, we set a negative `z-index` value to make sure these lines are positioned behind all other elements on the page and don't overlap with any other content.

Here's what the CSS declarations for positioning lines look like:

css

.gantt {
    position: relative;
    width: 100%;
}

.gantt__lines {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

To add vertical lines to our Gantt chart, we can split the lines element into six columns: one for the assignee's name and five for each day of the week. We can use CSS grid to make this happen.

To get started, let's create six empty `div` elements.

html

<div class="gantt__lines">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

To create a six-column layout for our lines element, we need to set `grid-template-columns: 5rem repeat(5, 1fr);`. The `5rem` value sets the width of the first column, which will show the assignee names. The `repeat(5, 1fr)` function creates five columns with flexible width that grow or shrink based on available space.

We also need to define one row for our grid using `grid-template-rows: 1fr;`. This ensures that all vertical borders span across the full height of their container.

css

.gantt__lines {
    display: grid;
    grid-template-columns: 5rem repeat(5, 1fr);
    grid-template-rows: 1fr;
}

Finally, we can add a border-right property to each grid cell by selecting all `div`s inside the lines element . This will give our project a clean and organized look.

css

.gantt__lines div {
    border-right: 1px solid rgb(203 213 225 / 0.4);
}

Take a look at the final result of the steps we've been following:

#Conclusion

To sum up, using CSS grid to create a Gantt chart is a quick and efficient method for displaying project schedules and timelines.

By assigning our tasks to rows and using the `grid-column` property to define their duration, we can quickly identify overlaps and gaps in the schedule. Adding vertical lines to the chart improves its readability and gives it a polished appearance. Overall, CSS grid offers a user-friendly approach to building dynamic layouts for Gantt charts.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Create a macOS calculator layout←

Create an event calendar→

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Create a Gantt chart

#Adding the header

#Organizing rows

#Organizing tasks

#Indicating task duration

#Making the chart easier to read

#Conclusion

Questions? 🙋

Recent posts ⚡

Newsletter 🔔