Gantt Rows
CSS-grid Gantt chart with a task-name column, week-column timeline, positioned duration bars with in-progress fills, and a today line.
CSS-grid Gantt chart with a task-name column, week-column timeline, positioned duration bars with in-progress fills, and a today line.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Gantt Rows is the Q2 2026 delivery window from Jun 2 to Jul 21 rendered as a CSS-grid timeline with a left task-name column and eight week columns to the right. Duration bars are positioned by percentage, done bars are dim, in-progress bars like Onboarding checklist v2 at 55% and API key rotation UI at 82% show a filled inner portion, and a vertical today line at Jun 13 cuts across every row.
Tasks are one typed array with startWeek, durationWeeks, and progressPct. The today line is a single positioned div derived from a constant offset, no chart library required.
Reach for this block on a project or sprint overview page wired to your task start and duration fields. Place it below stat cards so the board-level summary sits above the detailed timeline.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the team delivery schedule for a quarter. Other configurations:
Tip: bar widths reflect planned duration and a footnote says so, separating the plan from the progress fill so readers understand both at once.