diff --git a/docs/src/app/components/pages/components/GridList/ExampleComplex.js b/docs/src/app/components/pages/components/GridList/ExampleComplex.js
index 858b9f4e68efaf..2e9985bc4f90ae 100644
--- a/docs/src/app/components/pages/components/GridList/ExampleComplex.js
+++ b/docs/src/app/components/pages/components/GridList/ExampleComplex.js
@@ -13,7 +13,6 @@ const styles = {
width: 500,
height: 450,
overflowY: 'auto',
- marginBottom: 24,
},
};
@@ -62,6 +61,10 @@ const tilesData = [
},
];
+/**
+ * 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`.
+ */
const GridListExampleComplex = () => (
(
December
diff --git a/docs/src/app/components/pages/components/GridList/ExampleSingleLine.js b/docs/src/app/components/pages/components/GridList/ExampleSingleLine.js
new file mode 100644
index 00000000000000..9c7fc25623e0c7
--- /dev/null
+++ b/docs/src/app/components/pages/components/GridList/ExampleSingleLine.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 = {
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'space-around',
+ },
+ gridList: {
+ display: 'flex',
+ flexWrap: 'nowrap',
+ 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',
+ },
+];
+
+/**
+ * This example demonstrates the horizontal scrollable single-line grid list of images.
+ */
+const GridListExampleSingleLine = () => (
+
+
+ {tilesData.map((tile) => (
+ }
+ >
+
+
+ ))}
+
+
+);
+
+export default GridListExampleSingleLine;
diff --git a/docs/src/app/components/pages/components/GridList/Page.js b/docs/src/app/components/pages/components/GridList/Page.js
index 0506a65f712189..1483f84377d3fd 100644
--- a/docs/src/app/components/pages/components/GridList/Page.js
+++ b/docs/src/app/components/pages/components/GridList/Page.js
@@ -10,33 +10,33 @@ import gridListExampleSimpleCode from '!raw!./ExampleSimple';
import GridListExampleSimple from './ExampleSimple';
import gridListExampleComplexCode from '!raw!./ExampleComplex';
import GridListExampleComplex from './ExampleComplex';
+import gridListExampleSingleLineCode from '!raw!./ExampleSingleLine';
+import GridListExampleSingleLine from './ExampleSingleLine';
import gridListCode from '!raw!material-ui/GridList/GridList';
import gridTileCode from '!raw!material-ui/GridList/GridTile';
-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`.',
-};
-
const GridListPage = () => (
`Grid List - ${previousTitle}`} />
+
+
+