diff --git a/index.html b/index.html
index 419d47ccd..0fb9712e6 100644
--- a/index.html
+++ b/index.html
@@ -374,6 +374,15 @@ <h2>Frappe Gantt - <em>for you</em>.</h2>
                     name: 'Redesign website',
                     id: 'Task 0',
                     progress: random(),
+                    group : 0,
+                },
+                {
+                    start: daysSince(-5),
+                    end: daysSince(0),
+                    name: 'Redesign website - part 2',
+                    id: 'Task 0',
+                    progress: random(),
+                    group : 0,
                 },
                 {
                     start: daysSince(-15),
@@ -382,6 +391,16 @@ <h2>Frappe Gantt - <em>for you</em>.</h2>
                     id: 'Task 1',
                     progress: random(),
                     important: true,
+                    group : 1,
+                },
+                {
+                    start: daysSince(7),
+                    duration: '2d',
+                    name: 'Edit new content',
+                    id: 'Task 1',
+                    progress: random(),
+                    important: true,
+                    group : 1,
                 },
                 {
                     start: daysSince(10),
@@ -389,6 +408,7 @@ <h2>Frappe Gantt - <em>for you</em>.</h2>
                     name: 'Review',
                     id: 'Task 3',
                     progress: random(),
+                    group : 2,
                 },
                 {
                     start: daysSince(-3),
@@ -536,6 +556,8 @@ <h2>Frappe Gantt - <em>for you</em>.</h2>
                 today_button: true,
                 view_mode_select: true,
                 holidays: null,
+                enable_grouping: true,
+                groups: [0, 1, 2, 3],
             });
 
             const holidays = new Gantt('#holidays', tasksSpread, {
@@ -543,6 +565,8 @@ <h2>Frappe Gantt - <em>for you</em>.</h2>
                     '#bfdbfe': [],
                     '#a3e635': HOLIDAYS,
                 },
+                enable_grouping: true,
+                groups: [0, 1, 2],
             });
 
             const ignore = new Gantt('#ignore', tasks, {
@@ -562,6 +586,8 @@ <h2>Frappe Gantt - <em>for you</em>.</h2>
                 snap_at: '1d',
                 auto_move_label: false,
                 scroll_to: 'today',
+                enable_grouping: true,
+                groups: [0, 1, 2, 3],
             });
 
             const UPDATES = [
diff --git a/src/index.js b/src/index.js
index 054d3e2ce..ba3fa2540 100644
--- a/src/index.js
+++ b/src/index.js
@@ -196,9 +196,35 @@ export default class Gantt {
                     task.id = `${task.id}`;
                 }
 
+                // setting a dummy group if the group is not specified
+                if (typeof task.group == 'undefined') {
+                    task.group = 'group-' + task.id;
+                }
+
                 return task;
             })
             .filter((t) => t);
+        
+        this.groups = this.tasks;
+        if (this.options?.enable_grouping) {
+            // the groups are the union of the specified groups and the groups
+            // from the tasks.
+            let groupset = new Set()
+            if (this.options?.groups) {
+                groupset = groupset.union(new Set(this.options.groups));
+            }
+            const extendedset = groupset.union(new Set(this.tasks.map((t) => t.group)));
+            this.groups = Array.from(extendedset);
+
+            // the index of the tasks depend on the groups array. This allows
+            // for arbitrary naming of groups (not only numeric). Further, if
+            // the group is not specified, then the index of the task is
+            // updated correctly.
+            for (let task of this.tasks) {
+                task._index = this.groups.indexOf(task.group);
+            }
+
+        }
         this.setup_dependencies();
     }
 
@@ -399,7 +425,7 @@ export default class Gantt {
             this.config.header_height +
                 this.options.padding +
                 (this.options.bar_height + this.options.padding) *
-                    this.tasks.length -
+                    this.groups.length -
                 10,
             this.options.container_height !== 'auto'
                 ? this.options.container_height
@@ -430,20 +456,23 @@ export default class Gantt {
         const row_width = this.dates.length * this.config.column_width;
         const row_height = this.options.bar_height + this.options.padding;
 
-        let y = this.config.header_height;
-        for (
-            let y = this.config.header_height;
-            y < this.grid_height;
-            y += row_height
-        ) {
+        let row_y = this.config.header_height;
+
+        for (let _ of this.groups) {
             createSVG('rect', {
                 x: 0,
-                y,
+                y : row_y,
                 width: row_width,
                 height: row_height,
                 class: 'grid-row',
                 append_to: rows_layer,
             });
+
+            row_y += row_height;
+            
+            if (row_y >= this.grid_height) {
+              break;
+            }
         }
     }
 
@@ -512,7 +541,8 @@ export default class Gantt {
         if (this.options.lines === 'none') return;
         let tick_x = 0;
         let tick_y = this.config.header_height;
-        let tick_height = this.grid_height - this.config.header_height;
+        let tick_height = (this.grid_height - this.config.header_height)*
+            this.groups.length;
 
         let $lines_layer = createSVG('g', {
             class: 'lines_layer',
@@ -524,11 +554,7 @@ export default class Gantt {
         const row_width = this.dates.length * this.config.column_width;
         const row_height = this.options.bar_height + this.options.padding;
         if (this.options.lines !== 'vertical') {
-            for (
-                let y = this.config.header_height;
-                y < this.grid_height;
-                y += row_height
-            ) {
+            for (let _ of this.groups) {
                 createSVG('line', {
                     x1: 0,
                     y1: row_y + row_height,
@@ -538,6 +564,10 @@ export default class Gantt {
                     append_to: $lines_layer,
                 });
                 row_y += row_height;
+                
+                if (row_y >= this.grid_height) {
+                  break;
+                }
             }
         }
         if (this.options.lines === 'horizontal') return;