linkAbout the Grid
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.
linkExample
".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.
linkComponents
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.
Simplelink
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.
HOC Usage (Higher order component)link
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 })} />
Simple Grid Listlink
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.
