diff --git a/docs/src/app/components/pages/components/GridList/ExampleOneLined.js b/docs/src/app/components/pages/components/GridList/ExampleOneLined.js
new file mode 100644
index 00000000000000..70278a71e7e7c4
--- /dev/null
+++ b/docs/src/app/components/pages/components/GridList/ExampleOneLined.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import {GridList, GridTile} from 'material-ui/GridList';
+import IconButton from 'material-ui/IconButton';
+import StarBorder from 'material-ui/svg-icons/toggle/star-border';
+
+const styles = {
+  gridList: {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    margin: 'auto',
+    width: 500,
+    overflowX: 'auto',
+  },
+};
+
+const tilesData = [
+  {
+    img: 'images/grid-list/00-52-29-429_640.jpg',
+    title: 'Breakfast',
+    author: 'jill111',
+  },
+  {
+    img: 'images/grid-list/burger-827309_640.jpg',
+    title: 'Tasty burger',
+    author: 'pashminu',
+  },
+  {
+    img: 'images/grid-list/camera-813814_640.jpg',
+    title: 'Camera',
+    author: 'Danson67',
+  },
+  {
+    img: 'images/grid-list/morning-819362_640.jpg',
+    title: 'Morning',
+    author: 'fancycrave1',
+  },
+  {
+    img: 'images/grid-list/hats-829509_640.jpg',
+    title: 'Hats',
+    author: 'Hans',
+  },
+  {
+    img: 'images/grid-list/honey-823614_640.jpg',
+    title: 'Honey',
+    author: 'fancycravel',
+  },
+  {
+    img: 'images/grid-list/vegetables-790022_640.jpg',
+    title: 'Vegetables',
+    author: 'jill111',
+  },
+  {
+    img: 'images/grid-list/water-plant-821293_640.jpg',
+    title: 'Water plant',
+    author: 'BkrmadtyaKarki',
+  },
+];
+
+/**
+ * A example of arrange tiles for horizontal scrollable one line, using the `cols` props to adjust first view of tiles.
+ */
+const GridListExampleOneLined = () => (
+  <div style={styles.root}>
+    <GridList
+      style={styles.gridList}
+      cols={2.2}
+    >
+      {tilesData.map((tile) => (
+        <GridTile
+          key={tile.img}
+          title={tile.title}
+          actionIcon={<IconButton><StarBorder color="white" /></IconButton>}
+        >
+          <img src={tile.img} />
+        </GridTile>
+      ))}
+    </GridList>
+  </div>
+);
+
+export default GridListExampleOneLined;
diff --git a/docs/src/app/components/pages/components/GridList/Page.js b/docs/src/app/components/pages/components/GridList/Page.js
index 0506a65f712189..1b67b35c5c2564 100644
--- a/docs/src/app/components/pages/components/GridList/Page.js
+++ b/docs/src/app/components/pages/components/GridList/Page.js
@@ -10,6 +10,8 @@ import gridListExampleSimpleCode from '!raw!./ExampleSimple';
 import GridListExampleSimple from './ExampleSimple';
 import gridListExampleComplexCode from '!raw!./ExampleComplex';
 import GridListExampleComplex from './ExampleComplex';
+import gridListExampleOneLinedCode from '!raw!./ExampleOneLined';
+import GridListExampleOneLined from './ExampleOneLined';
 import gridListCode from '!raw!material-ui/GridList/GridList';
 import gridTileCode from '!raw!material-ui/GridList/GridTile';
 
@@ -17,6 +19,8 @@ const descriptions = {
   simple: 'A simple example of a scrollable `GridList` containing a [Subheader](/#/components/subheader).',
   complex: 'This example demonstrates "featured" tiles, using the `rows` and `cols` props to adjust the size of the ' +
   'tile. The tiles have a customised title, positioned at the top and with a custom gradient `titleBackground`.',
+  onelined: 'A example of arrange tiles for horizontal scrollable one line, using the `cols` props to adjust ' +
+  'first view of tiles.',
 };
 
 const GridListPage = () => (
@@ -37,6 +41,13 @@ const GridListPage = () => (
     >
       <GridListExampleComplex />
     </CodeExample>
+    <CodeExample
+      title="One line example"
+      description={descriptions.onelined}
+      code={gridListExampleOneLinedCode}
+    >
+      <GridListExampleOneLined />
+    </CodeExample>
     <PropTypeDescription header="### GridList Properties" code={gridListCode} />
     <PropTypeDescription header="### GridTile Properties" code={gridTileCode} />
   </div>