Components
Layout
Grid
Grid
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.
Note:The Grid component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to the Data Grid component.
How it works?
The grid system is implemented with the Grid component:
It uses CSS’s Flexible Box module for high flexibility.
There are two types of layout: containers and items.
Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Items have padding to create the spacing between individual items.
There are five grid breakpoints: xs, sm, md, lg, and xl.
Spacing
The responsive grid focuses on consistent spacing widths, rather than column width. Material Design margins and columns follow an 8px square baseline grid. The spacing property is an integer between 0 and 10 inclusive. By default, the spacing between two grid items follows a linear function: output(spacing) = spacing * 8px, e.g. spacing={2} creates a 16px wide gap.
Limitations
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 <body>. 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:
import React from 'react';
import { Button } from '@material-ui/core';
function App() {
return <Button color="primary">Hello World </ Button>;
}
3.
Adding overflow-x: hidden; to the parent.
white-space: nowrap;
The initial setting on flex items is min-width: auto. It's causing a positioning conflict when the children is using white-space: nowrap;. You can experience the issue with:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
In order for the item to stay within the container you need to set min-width: 0. In practice, you can set the zeroMinWidth property:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
direction: column;
Though the Grid component has a direction property that allows values of row, row-reverse, column, and column-reverse, there are some features that are not supported within column and column-reverse containers. The properties which define the number of grids the component will use for a given breakpoint (xs, sm, md, lg, and xl) are focused on controlling width and do not have similar effects on height within column and column-reverse containers. If used within column or column-reverse containers, these properties may have undesirable effects on the width of the Grid elements.
API
