Chat with us, powered by LiveChat

Creating a gantt timeline with css-grid

Creating a gantt timeline with css-grid

CV Timeline Creating a gantt timeline with css-grid

Considering how our core value proposition is to display an interactive Timeline of a CV; Finding the best solution to display the timeline was one of the first things we had to do. After some research we eventually found the best possible solution: CSS-Grid.

CSS grid is a relatively recent feature, however not too recent to bring upon serious browser compatibility concerns, therefore this solution works on all modern browsers. If your product has constraints with older browsers then feel free to check the compatibility here

Let’s get to it. To create the timeline we will need to have 2 elements

1 – A timeline container

.timeline_container {
    display: inline-grid; // initializes css grid for self and children
    grid-auto-columns: 40px; // defines the default width of each column
    grid-auto-rows: 40px; // defines the height of each row
    /* below the key property to making compact rows */
    grid-auto-flow: row dense;

2 – Timeline items

.timeline_item {
    grid-column: 3 / 5; // defines start and end column of the item

Your HTML will then look like the following:

<div class='timeline_container'>
    <div class='timeline_item'></div>
    <div class='timeline_item'></div>
    <div class='timeline_item'></div>

In our case we dynamically set the grid-column css property.

That’s it. Really! Obviously css-grid offers a myriad of possibilities and combinations. If you want to dig deeper I definitely recommend this article: