CSS ReactJS—Using Material UI Grid Spacing

In this article, we’ll introduce how to use Material UI Grid spacing in a ReactJS project to optimize CSS layout.

Read more: CSS Tutorial

What is Grid Spacing?

Grid spacing is a layout solution in Material UI. It’s based on CSS Grid, which aims to provide a simple, flexible, and easy-to-use grid system. With Grid spacing, we can easily create responsive grid layouts that look consistent across different screen sizes.

Install Material UI

Using Grid Before we start using the spacing library, we need to install the Material UI library. We can install it using the npm package manager. Enter the following command in the command line:

npm install @material-ui/core

Once installed, we can use the Material UI components in our React project.

Using Grid spacing

Before using Grid spacing, we need to import the corresponding components. Add the following code to the top of your React component:

import { Grid } from '@material-ui/core';

Now we can use the Grid component in our component’s render method to create a grid layout. Here’s an example:

render() { 
return ( 
<Grid container spacing={2}> 
<Grid item xs={12} sm={6} md={4}> 
{/* First grid */} 
</Grid> 
<Grid item xs={12} sm={6} md={4}> 
{/* Second grid */} 
</Grid> 
<Grid item xs={12} sm={12} md={4}> 
{/* Third grid */} 
</Grid> 
</Grid> 
); 
} 

In the code above, we first use <Grid container> to create a container that will contain our grid layout. By adding spacing={2}, we add a 2-pixel gap between the grid cells.

Next, we create each grid using <Grid item>. By setting xs={12}, we ensure that it will occupy the entire width on all screen sizes. By sm={6} and md={4}, we can configure the number of columns displayed on different screen sizes.

Inside each grid tag, we can add our own content, such as text, https://coder-cafe.com/wp-content/uploads/2025/09/images, or other components.

Customizing Grid Spacing

In addition to the default grid spacing, we can also modify the grid spacing by using a custom theme. First, we need to import the createMuiTheme and ThemeProvider components at the top of the component:

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; 

Then, we can create a custom theme and apply it to the entire application. Here’s an example:

const theme = createMuiTheme({ 
spacing: 10, 
}); 

render() { 
return ( 
<ThemeProvider theme={theme}> 
{/* Page content */} 
</ThemeProvider> 
); 
} 

In the code above, we create a theme called theme and set spacing to 10 pixels. We then apply this theme to the entire application via ThemeProvider.

Responsive Layouts

Grid spacing is ideal for creating responsive layouts. By setting the number of columns in each grid for different screen sizes, we can ensure that our layout looks good on different devices. Here’s an example:

<Grid item xs={12} sm={6} md={4} lg={3} xl={2}> 
{/* Grid content */} 
</Grid> 

In the code above, by specifying different numbers of columns, we can make the grid appear in different arrangements on different screen sizes.

Summary

By using Material UI’s Grid spacing, we can easily build responsive grid layouts. We can use <Grid container> to create a container, and within that, use <Grid item> to create each grid item. By setting the number of columns for different screen sizes, we can achieve a flexible layout. Furthermore, we can modify the grid spacing by customizing the theme. I hope this article helps you use Material UI Grid spacing in your ReactJS projects!