Sometimes specific layouts are difficult to achieve when there are complicated components, and even more so when the components are reactive. The best way to arrange one’s website would be to utilize MUI’s Grid API. This API is simple to understand and can be customized for any purpose.
The installation for MUI version 5’s grid api is below. All of these installations are necessary for the grid to be functional and customized properly.
npm install @mui/material @emotion/react @emotion/styled
At its basic structure, the Grid API consists of a grid container filled with grid items. Inside a container, the width can be broken down into 12 sections. Since the grid items are rendered in ratio to one another, everything inside the grid would be reactive to the viewport’s size. It is very simple to understand the two components listed before, and it is also important to visualize the structure to understand how to properly customize each part. As you can see below the example, items without a defined width would output equally spaced grid items. If there are too many grid items, the next one automatically wraps to the next row.
<Grid container>
<Grid item> (1) </Grid item>
<Grid item> (2) </Grid item>
<Grid item> (3) </Grid item>
</Grid container>
| (1) | (2) | (3) |
Your grid item widths can be specified to take up smaller or larger ratios, and other properties can adjust these ratios depending on screen size. Please go to React Grid Component to learn more on the xs, sm, and md sizing prop.
<Grid container>
<Grid item xs={2}> (1) </Grid item>
<Grid item xs={6}> (2) </Grid item>
<Grid item xs={4}> (3) </Grid item>
<Grid item xs={12}> (4) </Grid item>
</Grid container>
| (1) | (2) | (3) | |||||||||
| (4) |
Of course, it is important to note other customization props that can be utilized to adjust every part of the grid, starting with the container. The container’s width can be customized in a percentage or in px to limit the items to a section on one’s website. The container can also include the spacing prop to make margins around each item without accidentally pushing an item to the next line. You can also use an sx prop inside any of the tags to Please go to Grid API to read about a full list of possible props to customize.
<Grid container spacing={1}>
<Grid item> {...} </Grid item>
<Grid item> {...} </Grid item>
<Grid item> {...} </Grid item>
</Grid container>
The MUI Grid API works smoothly with other MUI and React components, such as buttons or typography. Please go to States N Hooks to learn more about possible React and MUI functions that you could implement in your projects.
