diff --git a/src/cdk/drag-drop/drag-drop.md b/src/cdk/drag-drop/drag-drop.md
index 76d8550bc22..efc0e9c3752 100644
--- a/src/cdk/drag-drop/drag-drop.md
+++ b/src/cdk/drag-drop/drag-drop.md
@@ -41,7 +41,7 @@ by referencing the `id` of another drop container:
If you have an unknown number of connected drop lists, you can use the `cdkDropListGroup` directive
to set up the connection automatically. Note that any new `cdkDropList` that is added under a group
-will be connected to all other automatically.
+will be connected to all other lists automatically.
```html
diff --git a/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.css b/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.css
new file mode 100644
index 00000000000..81ffa9305f0
--- /dev/null
+++ b/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.css
@@ -0,0 +1,54 @@
+.example-container {
+ width: 400px;
+ max-width: 100%;
+ margin: 0 25px 25px 0;
+ display: inline-block;
+ vertical-align: top;
+}
+
+.example-list {
+ border: solid 1px #ccc;
+ min-height: 60px;
+ background: white;
+ border-radius: 4px;
+ overflow: hidden;
+ display: block;
+}
+
+.example-box {
+ padding: 20px 10px;
+ border-bottom: solid 1px #ccc;
+ color: rgba(0, 0, 0, 0.87);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ cursor: move;
+ background: white;
+ font-size: 14px;
+}
+
+.cdk-drag-preview {
+ box-sizing: border-box;
+ border-radius: 4px;
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+ 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+ opacity: 0;
+}
+
+.cdk-drag-animating {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+ border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
diff --git a/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.html b/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.html
new file mode 100644
index 00000000000..edd8d80438e
--- /dev/null
+++ b/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.html
@@ -0,0 +1,25 @@
+
diff --git a/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts b/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts
new file mode 100644
index 00000000000..4bbbe1b1a0e
--- /dev/null
+++ b/src/material-examples/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts
@@ -0,0 +1,38 @@
+import {Component} from '@angular/core';
+import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
+
+/**
+ * @title Drag&Drop connected sorting group
+ */
+@Component({
+ selector: 'cdk-drag-drop-connected-sorting-group-example',
+ templateUrl: 'cdk-drag-drop-connected-sorting-group-example.html',
+ styleUrls: ['cdk-drag-drop-connected-sorting-group-example.css'],
+})
+export class CdkDragDropConnectedSortingGroupExample {
+ todo = [
+ 'Get to work',
+ 'Pick up groceries',
+ 'Go home',
+ 'Fall asleep'
+ ];
+
+ done = [
+ 'Get up',
+ 'Brush teeth',
+ 'Take a shower',
+ 'Check e-mail',
+ 'Walk dog'
+ ];
+
+ drop(event: CdkDragDrop
) {
+ if (event.previousContainer === event.container) {
+ moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+ } else {
+ transferArrayItem(event.previousContainer.data,
+ event.container.data,
+ event.previousIndex,
+ event.currentIndex);
+ }
+ }
+}