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:

A crash course in Next.js middleware

A crash course in Next.js middleware

Learn the ins and outs of Next.js middleware, which allows you to perform actions before a request is completed and modify the response accordingly.

Temitope Oyedele
May 23, 2025 â‹… 9 min read
How AI Is Changing Debugging With Google Gemini

How AI is changing debugging with Google Gemini

The Google Gemini AI model has integrated AI-powered features to improve the debugging experience in web development.

Emmanuel John
May 23, 2025 â‹… 5 min read
10 Node.js 24 features you're probably not using

10 Node.js 24 features you’re probably not using

The Node.js 24 release included significant updates. Explore 10 features you might not be using yet — but absolutely should be.

Emmanuel John
May 22, 2025 â‹… 8 min read
six CSS animation libraries to bring your project to life in 2025

6 CSS animation libraries to bring your project to life in 2025

Explore six of the best, easiest, most configurable, and convenient CSS animation libraries available in 2025.

Murat YĂĽksel
May 22, 2025 â‹… 8 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