diff --git a/docs/src/pages/components/grid/grid.md b/docs/src/pages/components/grid/grid.md
index 07fcdf7d60f55d..929f9eb0c8035b 100644
--- a/docs/src/pages/components/grid/grid.md
+++ b/docs/src/pages/components/grid/grid.md
@@ -101,24 +101,7 @@ If you need to do such, remove one of the props.
### Negative margin
-There is one limitation with the negative margin we use to implement the spacing between items.
-A horizontal scroll will appear if a negative margin goes beyond the `
`.
-There are 3 available workarounds:
-
-1. Not using the spacing feature and implementing it in user space `spacing={0}` (default).
-2. Applying padding to the parent with at least half the spacing value applied to the child:
-
- ```jsx
-
-
-
- //...
-
-
-
- ```
-
-3. Adding `overflow-x: hidden;` to the parent.
+The spacing between items is implemented with a negative margin. This might lead to unexpected behavior. For instance, in order to apply a background color, you need to apply `display: flex;` to the pare
### white-space: nowrap;
diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js
index 2d9b49717dd43b..daa51274827d3a 100644
--- a/packages/material-ui/src/Grid/Grid.js
+++ b/packages/material-ui/src/Grid/Grid.js
@@ -18,9 +18,9 @@ import requirePropFactory from '../utils/requirePropFactory';
const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-function getOffset(val, div = 1) {
+function getOffset(val) {
const parse = parseFloat(val);
- return `${parse / div}${String(val).replace(String(parse), '') || 'px'}`;
+ return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
}
function generateGrid(globalStyles, theme, breakpoint) {
@@ -53,8 +53,13 @@ function generateGrid(globalStyles, theme, breakpoint) {
// Keep 7 significant numbers.
const width = `${Math.round((size / 12) * 10e7) / 10e5}%`;
- const fullWidths = SPACINGS.slice(1).reduce((obj, spacing) => {
+ const fullWidths = SPACINGS.reduce((obj, spacing) => {
const themeSpacing = theme.spacing(spacing);
+
+ if (themeSpacing === '0px') {
+ return obj;
+ }
+
const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
return {
...obj,
@@ -68,9 +73,9 @@ function generateGrid(globalStyles, theme, breakpoint) {
// Close to the bootstrap implementation:
// https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
styles[key] = {
+ maxWidth: width,
flexBasis: width,
flexGrow: 0,
- maxWidth: width,
...fullWidths,
};
});
diff --git a/test/regressions/tests/Grid/StressGrid.js b/test/regressions/tests/Grid/StressGrid.js
index 09774a61c905a9..4af6d9d69d3b06 100644
--- a/test/regressions/tests/Grid/StressGrid.js
+++ b/test/regressions/tests/Grid/StressGrid.js
@@ -1,65 +1,55 @@
import React from 'react';
-import PropTypes from 'prop-types';
import Paper from '@material-ui/core/Paper';
-import { withStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
import Grid from '@material-ui/core/Grid';
-const styles = (theme) => ({
- root: {
- width: 400,
- backgroundColor: theme.palette.secondary.main,
- },
- paper: {
- padding: 16,
- textAlign: 'center',
- },
-});
-
-function StressGrid(props) {
- const { classes } = props;
-
+export default function StressGrid() {
return (
-
+
- xs=3
+ xs=3
- xs=9
+ xs=9
- first
+ first
- last
+ last
- space
+ space
- between
+ between
- reverse
+ reverse
- column
+ column
-
+
);
}
-
-StressGrid.propTypes = {
- classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(StressGrid);
diff --git a/test/regressions/tests/Grid/StressNestedGrid.js b/test/regressions/tests/Grid/StressNestedGrid.js
new file mode 100644
index 00000000000000..2068c9cdd93df5
--- /dev/null
+++ b/test/regressions/tests/Grid/StressNestedGrid.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+
+export default function StressNestedGrid() {
+ return (
+
+
+
+ xs=12
+
+
+ xs=6
+
+
+ xs=6
+
+
+
+ xs=6
+
+
+
+
+ xs=7
+
+
+ xs=5
+
+
+
+ xs=6
+
+
+
+
+
+ xs=6
+
+
+ xs=6
+
+
+
+
+ xs=8
+
+
+ xs=4
+
+
+
+
+ xs=4
+
+
+ xs=4
+
+
+ xs=4
+
+
+
+
+ xs=6
+
+
+ xs=6
+
+
+
+
+ );
+}