2022-11-16
2422
#react
Gaurav Singhal
14080
Nov 16, 2022 â‹… 8 min read

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:

what are the event loop and call stack in JavaScript

What are the event loop and call stack in JavaScript?

Learn how the call stack, event loop, and various queues help JavaScript handle asynchronous operations while maintaining its single-threaded nature.

Ikeh Akinyemi
Feb 18, 2025 â‹… 6 min read
how and when to use JavaScript arrow functions

How and when to use JavaScript arrow functions

Arrow functions have a simpler syntax than standard functions, and there are some important differences in how they behave.

Joe Attardi
Feb 17, 2025 â‹… 5 min read
javascript is null or empty function

How to check for null, undefined, or empty values in JavaScript

In most languages, we only have to cater to null. But in JavaScript, we have to cater to both null and undefined. How do we do that?

Lewis Cianci
Feb 14, 2025 â‹… 4 min read
MERN Stack: Overview With Examples

What is the MERN stack? Overview with examples

Discover how the MERN stack (MongoDB, Express.js, React, Node.js) enables developers to build dynamic, performant, modern websites and apps.

Nefe Emadamerho-Atori
Feb 13, 2025 â‹… 20 min read
View all posts

4 Replies to "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