Grids

The Material Design grid framework works on a 12 column grid system for desktop devices, an 8 column grid system for tablet devices, and a 4 column grid system for mobile devices.

The react-md library has implemented this by creating the .md-grid and .md-cell class names. Using both of these together you can get the required margins and gutter for an application.

The grid is implemented with the .md-grid flexbox container and each column (or cell) is defined using the .md-cell class name. The default behavior is for the .md-cell to span an entire row on mobile devices, 3/4 a row on tablets, and 1/2 a row on desktops / larger screens. Since this will not work with all cases, you can also apply the .md-cell--NUMBER class name to get a more defined grid system. When using the .md-grid--NUMBER class name, if the current device's max columns per row is less than the number, the column will just span the entire row.

".md-cell .md-cell--5" - This would span an entire row on mobile devices, 5/8s of a row on tablets, and 5/12s on desktops / larger screens.

There are 3 components that have been created to help create Grids with the appropriate class names. Please see the examples below for more information about the Grid, Cell, and GridList components.

This example showcases some of the very simple sizing that can be applied to grids. Resize the page to see how the grid resizes and positions itself based on media size.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
6
4
2
6 (8 tablet)
4 (6 tablet)
2 (4 phone)
Offset 3
Phone offset 1, tablet offset 3, desktop offset 2
(order 2)
(order 1)
(order 0)

Since it can be undesired to have additional divs just for creating a layout system, the Grid and Cell components can act as higher order components and return a className to apply to a child component instead of rendering as a div. To get this functionality, you just need to create a callback function as the children of the Grid or Cell that accepts an object containing style (optional) and className. You can then apply these class names to whichever child component you would like.

In addition, the Grid and Cell components have a static function named getClassName that can be used instead. It is basically the same as the HOC version except that it is not a renderable component.

// These two are equivalent
<Cell size={1}>{({ className }) => <div className={className} />}</Cell>
<div className={Cell.getClassName({ size: 1 })} />
Jsx

This example also showcases how you can use the react-md-make-grid-container and react-md-make-custom-grid to make a grid that has different max widths based on media sizes and only allowing 3 columns in the grid for all media sizes.

Something
Something
Something
Something
Something
Something
Something
Something
Something
Something
Something
Something
Something
Something
Something

Since there are times that a grid will have equal sized cells and just reapplying the same class names over and over again, a GridList component has been made to easily apply styles. This component will wrap the className functionality from both Grid and Cell into a single API and then clone the correct className into each child component in the GridList. All of the components within react-md will work with this by default, but if you create a custom component, you must correctly apply the className prop to your child element.

This example will be the same as the example above, but just using the GridList component instead to showcase the boilerplate it removes.

Something
Something
Something
Something
Something
Something
Something
Something
Something
Something
Something
Something
Something
Something
Something