Material UI and Grid system

reactjs material-design material-ui grid-system
kharandziuk picture kharandziuk · Nov 12, 2015 · Viewed 115.4k times · Source

I'm playing a little bit with Material-UI. Are there any options for creating a grid layout (like in Bootstrap)?

If not, what is the way to add this functionality?

There is a GridList component but I guess it has some different purpose.

Answer

icc97 picture icc97 · Feb 26, 2017

Material UI have implemented their own Flexbox layout via the Grid component.

It appears they initially wanted to keep themselves as purely a 'components' library. But one of the core developers decided it was too important not to have their own. It has now been merged into the core code and was released with v1.0.0.

You can install it via:

npm install @material-ui/core

It is now in the official documentation with code examples.

Related questions

How get data from material-ui TextField, DropDownMenu components?

I create form, I have several TextField, DropDownMenu material-ui components included, question is how I can collect all data from all TextFields, DropDownMenus in one obj and sent it on server. For TextField it has TextField.getValue() Returns the value …

Read More
How to add multiple classes in Material UI using the classes props

Using the css-in-js method to add classes to a react component, how do I add multiple components? Here is the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); Here is how I used it: return ( &…

Read More
What's the right way to float right or left using the material-ui appbar with material-ui-next?

I can't figure out if I'm using the right approach to get the login/logout buttons to float right in while using material-ui-next ("material-ui": "^1.0.0-beta.22",) It seems they removed iconElementRight= from the api. Do we have to use the <…

Read More