2025-04-11
2418
#react
Gaurav Singhal
14080
116
Apr 11, 2025 â‹… 8 min read

A guide to the MUI grid system

Gaurav Singhal Gaurav is a data scientist with a strong background in computer science and mathematics. As a developer, he works with Python, Java, Django, HTML, Struts, Hibernate, Vaadin, web scraping, Angular, and React.

Recent posts:

best JavaScript and HTML5 game engines

Best JavaScript and HTML5 game engines (updated for 2025)

Check out this guide, which ranks the top 10 JavaScript/HTML5 game engines by popularity, capability, and use case.

Solomon Eseme
May 2, 2025 â‹… 15 min read

React Compiler RC: What it means for React devs

The React team officially released the first Release Candidate (RC). Let’s go over what’s new in RC and what it means for React developers.

David Omotayo
May 2, 2025 â‹… 7 min read
Understanding Anthropic's Model Context Protocol (MCP)

Understanding Anthropic’s Model Context Protocol (MCP)

The Model Context Protocol (MCP) provides a standardized way for AI models to access contextual information from diverse data sources.

David Omotayo
May 2, 2025 â‹… 12 min read
Choosing The Best Access Control Model For Your Frontend

Choosing the best access control model for your frontend

Explore RBAC, ABAC, ACL, and PBAC access control methods and discover which one is ideal for your frontend use case.

Temitope Oyedele
May 1, 2025 â‹… 10 min read
View all posts

4 Replies to "A guide to the MUI grid system"

  1. Your mistakenly confusing Material Design, the UI/ux design patterns created by Google and Material UI a react library that implements Material Design.

  2. Hi,

    Yes you are right, Material-UI is an open source react library and is not developed by Google. I got caught up with the symmetry and similarities of terms. I have made the required changes.
    I hope you like the article.

    Best Regards,
    Gaurav Singhal

  3. Thanks for the article, really helpful for me when learning about this!

    Hope you don’t mind me posting two super minor bugs in case other readers copy/paste your code blocks like I did when I was learning:

    * In the ‘Spacing’ section, I think you meant to write {spacing}, so spacing variable value is printed to the screen

    * In the ‘Fluid grids’ section, you use the variable ‘theme’ which is undefined. I think you’ve done the standard ‘makeStyles’ but are missing a bit of code for that:


    import { makeStyles } from ‘@material-ui/core/styles’;

    const useStyles = makeStyles((theme) => ({
    root: {
    flexGrow: 1
    },
    paper: {
    padding: 20,
    textAlign: “center”,
    color: theme.palette.text.secondary,
    fontFamily: “Roboto”
    }
    }));

    export default function BreakpointGridDemo() {
    const classes = useStyles();

    Thanks again!

Leave a Reply