Creating a gantt timeline with css-grid

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 https://caniuse.com/#feat=css-grid

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