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.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
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.