MaterialUI Flexbox & Grid Tutorial

Decided it was time to sit down and actually study CSS Flexbox and CSS Grid instead of just throwing random configurations at it until it worked.

This is a tutorial on flexbox and grid using MateriaUI

Useful Docs:

Timestamps:
0:00 Intro
1:20 presentation
4:35 start
5:50 flexbox
12:20 grid

[khandoor]

Another awesome tutorial. I am a big Materialui user this was great.

[harmanmax]

supper quick explanation :) Love it man

[avinashkumarsingh]

Great content as always. Can you please make a tutorial on the redux toolkit?

[jrhager]

One thing I'll say is MUI has a Grid component that is basically a div with built-in flex. If you use flex, you should probably use Grid, and if you want to use css-grid (confusing I know) you should use box with display set to 'grid.' There's some really nice syntactic sugar with Grid, you can have a 'container' prop, an 'item' prop, and use them within each other to make nested layouts. Check it out! :)

[cartman]

idk if its just me not used to it yet or because of the recent update of MUI.. but I struggled so much using their flexbox and grid system. i spent hours trying to make a responsive section, i felt like i wouldve been fast with just plain css or other tools like tw or bstrap.

[aggyratusdemitrus]

omds most fucking relatble thing i have heard 0:45 naa m giving u a sub man thx dawwg

[stjepansuton]

How can i make my container grid or box take up the whole body without using I can never get that to work