Grid In Material Ui

admin 11/22/2021
83 Comments

Material UI's Grid layout system is mostly a wrapper around the 'CSS Flexible Box module', also known as Flexbox. See the official specfor Flexbox here.

Data Grid - Layout. The data grid offers multiple layout mode. By default, the grid has no intrinsic dimensions. It occupies the space its parent leaves. ⚠️ When using% (percentage) for your height or width. You need to make sure the container you are putting the grid into also has an intrinsic dimension. Demos: - Grid( Grid API(. Tags: Grid, Layout, Material-UI, React, UI Components. We're going to learn how to use the Material UI Grid system using the Material UI react library. The grid system can be used to create fluid responsive eleme. 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. The grid system is implemented with the Grid component: It uses CSS’s Flexible Box module for high flexibility. The Material Design layout grid can be customized for touch UIs that scroll horizontally. Columns, gutters, and margins are laid out from left to right, rather than top to bottom. The height of the screen determines the number of columns in a horizontal grid.

This particular library is an example of why you should read the source code of libraries to understand how theywork at a deeper level. Without an understanding of Flexbox, you won't understand what most of the props are doing here.Similarly, if you've mastered Flexbox or CSS Grid already, you may find it more comfortable to implement your owngrid with your own CSS.

So while it's not required to use Material UI's Grid to build grids in your application, using it does have some advantages (and disadvantanges).

Material

A Brief Explanation of Flexbox

Let's refer to the W3 spec on the exact terms we'll be using.

A flex container is the box generated by an element with a computed display of flex or inline-flex.In-flow children of a flex container are called flex items and are laid out using the flex layout model.

So to keep the definition really simple, a flex container is an element with CSS display: flex. That's it, by that oneCSS property, that element becomes a flex container and the children of that element magically become flex items.Check out Example 1 below for a simple example of a pure flexbox with no other CSS properties other than a border on the items so you cansee how they are laid out by default.

Properties of Flexbox

Of course there is no better site than CSS Tricks for the complete visual guide of flexbox.As Material UI uses Flexbox under the hood for their Grid, you should at least know a few key properties. Using the flex-grow property, you can specifya unitless value (like 2,2,4,4) to proportionally scale the widths of the items or have one item take up the remaining space. flex-basis accepts more normalwidth values (33%, 100px) to use as the default column width before applying flex-grow properties. Material UI uses flex-basis and max-width to set thewidths of the columns this way with the below breakpoint properties. In all honesty, Flexbox is just more confusing than CSS Grid properties, which can specifycolumn widths a bit more expressively with the grid-template-columns prop.

So how does Material UI Grid compare to Flexbox?

Material UI Grid's grid uses Flexbox under the hood. The properties of Flexbox are used as properties of the Grid, so you can control the componentas if it were a flexbox. Additionally, Material UI's Grid also provides helpers for spacing, responsive design, and fitting a 12 column layout.To see all the properites of Grid, check out the Grid API or look at the bottom of the Grid source code to see prop types.

Now for the tricky part: using breakpoints as props to the Grid, we can specify how many columns we want that component to take up, for each of thebreakpoints. We'll explain this in our responsive design section. First let's look at the breakpoint values.

Material UI Breakpoints

Looking at Material UI's default breakpoints, we can see theseare the horizontal screen sizes we will use as props to the Grid component. These are also used elsewhere in Material UI.

Material UI Grid Responsive Design

So how do we implement responsive design with Material UI's Grid?As you can see in our Example 4 component in the above Sandbox:

Observe the comments in the GridItem to get a feel for how this works. We are specifying multiple breakpoints toprogressively use 4 columns on desktop, 2 columns on tablet, and 1 column on phones. This level of customization is usuallyonly found on apps like landing pages, where multi-media components need special handling on each device.Most often, you'll find yourself collapsing 2 column layouts on desktop into 1 column layouts on mobile phones.

Material UI Templates using Grid

Looking for a downloadable project with tons of Grid examples? All of React School's Material UI Templates use Material UI Grids. Check out the free projectto see our Grids in action!

Grid

Material Ui Grid Full Height

The API documentation of the Grid React component.

Props

NameTypeDefaultDescription
alignContentenum: 'stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around'
'stretch'Defines the align-content style property. It's applied for all screen sizes.
alignItemsenum: 'flex-start', 'center', 'flex-end', 'stretch', 'baseline'
'stretch'Defines the align-items style property. It's applied for all screen sizes.
childrennodeThe content of the component.
classesobjectOverride or extend the styles applied to the component. See CSS API below for more details.
componentunion: string
func
object
'div'The component used for the root node. Either a string to use a DOM element or a component.
containerboolfalseIf true, the component will have the flex container behavior. You should be wrapping items with a container.
directionenum: 'row'
'row-reverse'
'column'
'column-reverse'
'row'Defines the flex-direction style property. It is applied for all screen sizes.
itemboolfalseIf true, the component will have the flex item behavior. You should be wrapping items with a container.
justifyenum: 'flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'
'flex-start'Defines the justify-content style property. It is applied for all screen sizes.
lgenum: false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
falseDefines the number of grids the component is going to use. It's applied for the lg breakpoint and wider screens if not overridden.
mdenum: false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
falseDefines the number of grids the component is going to use. It's applied for the md breakpoint and wider screens if not overridden.
smenum: false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
falseDefines the number of grids the component is going to use. It's applied for the sm breakpoint and wider screens if not overridden.
spacingenum: 0, 8, 16, 24, 32, 40
0Defines the space between the type item component. It can only be used on a type container component.
wrapenum: 'nowrap'
'wrap'
'wrap-reverse'
'wrap'Defines the flex-wrap style property. It's applied for all screen sizes.
xlenum: false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
falseDefines the number of grids the component is going to use. It's applied for the xl breakpoint and wider screens.
xsenum: false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
falseDefines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority.
zeroMinWidthboolfalseIf true, it sets min-width: 0 on the item. Refer to the limitations section of the documentation to better understand the use case.

Any other properties supplied will be spread to the root element (native element).

CSS API

You can override all the class names injected by Material-UI thanks to the classes property.This property accepts the following keys:

NameDescription
containerStyles applied to the root element if container={true}.
itemStyles applied to the root element if item={true}.
zeroMinWidthStyles applied to the root element if zeroMinWidth={true}.
direction-xs-column
direction-xs-column-reverse
direction-xs-row-reverse
wrap-xs-nowrap
wrap-xs-wrap-reverse
align-items-xs-center
align-items-xs-flex-start
align-items-xs-flex-end
align-items-xs-baseline
align-content-xs-center
align-content-xs-flex-start
align-content-xs-flex-end
align-content-xs-space-between
align-content-xs-space-around
justify-xs-center
justify-xs-flex-end
justify-xs-space-between
justify-xs-space-around
justify-xs-space-evenly
spacing-xs-8
spacing-xs-16
spacing-xs-24
spacing-xs-32
spacing-xs-40
grid-xs-auto
grid-xs-true
grid-xs-1
grid-xs-2
grid-xs-3
grid-xs-4
grid-xs-5
grid-xs-6
grid-xs-7
grid-xs-8
grid-xs-9
grid-xs-10
grid-xs-11
grid-xs-12

Have a look at overriding with classes sectionand the implementation of the componentfor more detail.

If using the overrides key of the theme as documentedhere,you need to use the following style sheet name: MuiGrid.

Data Grid In Material Ui

Demos