How to Create a Material-UI Container with Fluid Layout (Plus Padding, Border, and Margin Styling)

The Material-UI Container is a great all-purpose layout component. The fluid container makes it even easier to center and size components exactly as you want them. How? The fluid container expands and contracts with screen size according to a simple maxWidth prop easily passed to the component.

Full React code for this tutorial is in the Code Sandbox Link in the Resources section.

What We’ll Build

In this fluid container tutorial we’ll stack three containers – the top container with maxWidth="sm", the middle with maxWidth="md", and the bottom with maxWidth="lg". The top container also has padding removed (which is why there is no grey on the left or right), the middle container has a border that changes color on hover, and the bottom container has custom margin (and we’ll discuss why the container might not be centered).

Fluid Container Default Values

A fluid container is actually a div with some default styling applied by Material-UI. The below screenshot of dev tools shows some of those stylings applied to the middle container. For example, MUI applied padding, width, and (since it’s a fluid container) maxWidth. I applied the border attributes via a css class.

As info, the default maxWidth value for sm is 60px, md is 960px, and lg is 1280px. I wanted to override the default maxWidth for the “md” size fluid container, so I targeted the .MuiContainer-maxWidthMd class. You can also see that in the screenshot below. If I desired to override the md width for all fluid containers, I would create a new theme to accomplish this global styling.

Fluid container with md default maxWidth override

Container Padding, Border, and Margin

Left and right padding can be removed on containers with the disableGutters={true} prop:

<Container
  maxWidth="sm"
  className={`${classes.container} ${classes.containerSm}`}
  disableGutters={true} //same as setting padding: 0 in class
>

Alternatively, I could simply override the padding with padding: 0 inline styling or via a CSS class. Usually in Material-UI overriding default styling with CSS is not as simple as that.

I set border on the second container and change the border style on hover over the container:

containerMd: {
  border: "2px solid black",
  borderRadius: 4,
  "&.MuiContainer-maxWidthMd": {
    maxWidth: 1000
  },
  "&.MuiContainer-root:hover": {
    border: "4px solid green"
  }
}

Notice the syntax in the hover selector. The spacing and colon must be very precise.

In the large container, I set marginTop and marginBottom to 8px simply via CSS.

containerLg: {
  marginTop: "8px",
  marginBottom: "8px"
}

However, if I try to set marginLeft or marginRight, it will remove the automatic centering of the component. This is because margin ‘auto’ was applied by MUI to center the container, as we can see in the dev tools screenshot above.

If you are struggling to achieve the exact layout you desire with the Container, consider using the Box component for properly aligning components.

Resources

Code Sandbox Link – After opening the Sandbox, choose the “Open in new window” option to see the full effect of the fluid container.

Material-UI Container docs

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.