diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js
index ae6dc8cc7bb450..e1d44f5c0e2d0e 100644
--- a/packages/material-ui/src/Grid/Grid.js
+++ b/packages/material-ui/src/Grid/Grid.js
@@ -17,7 +17,7 @@ import withStyles from '../styles/withStyles';
import { keys as breakpointKeys } from '../styles/createBreakpoints';
import requirePropFactory from '../utils/requirePropFactory';
-const GUTTERS = [1, 2, 3, 4, 5, 6, 7, 8];
+const GUTTERS = [0, 1, 2, 3, 4, 5, 6, 7, 8];
const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
function generateGrid(globalStyles, theme, breakpoint) {
@@ -68,7 +68,12 @@ function generateGrid(globalStyles, theme, breakpoint) {
function generateGutter(theme, breakpoint) {
const styles = {};
- GUTTERS.forEach(spacing => {
+ GUTTERS.forEach((spacing, index) => {
+ if (index === 0) {
+ // Skip the default style.
+ return;
+ }
+
const themeSpacing = spacing * theme.spacing.unit;
styles[`spacing-${breakpoint}-${spacing}`] = {
diff --git a/packages/material-ui/src/Grid/Grid.test.js b/packages/material-ui/src/Grid/Grid.test.js
index 2af4a87a45558d..36ecb20fb70e4a 100644
--- a/packages/material-ui/src/Grid/Grid.test.js
+++ b/packages/material-ui/src/Grid/Grid.test.js
@@ -59,7 +59,7 @@ describe('', () => {
describe('prop: spacing', () => {
it('should have a spacing', () => {
const wrapper = shallow();
- assert.strictEqual(wrapper.hasClass(classes['spacing-xs-8']), true);
+ assert.strictEqual(wrapper.hasClass(classes['spacing-xs-1']), true);
});
});