How to Calculate Responsive Grid Layouts (STEP BY STEP!!)

Sign up to my newsletter for exclusive content:

Follow me on IG (Daily updates):

===

🔗 Links

[Mizko]

I apologize, I realised I was referring to margins as gutters and gutters as margins 😂 Explaining, calculating and filming at the same time can be a little tricky sometimes!

[stevenquadros]

I guess the important takeaway from this video (for anyone who may misinterpret it like I did when I first learnt this concept) is that we don't need to focus on the exact pixel values (329 or 332) when it comes to width. Because like mizko said, width of elements will be dynamic at different viewport sizes. You should rather focus on choosing what margin and gutter space you want to apply. Because in responsive layouts, your columns are dynamic but your margin and gutter remain static

[cardozzzo]

Bro, I have 4 years of experience but always struggled with those numbers. Your step by step guide made all of this more simple to me!

[dominiqueterry]

This was insanely helpful. I knew I was missing something in my designs, and now I'm going to go back and calculate new distances for all my elements. Thank you!

[lilyshevchenko]

Legend!!! Should start calling you Mizko Edison for all the light bulb moments!!! 😁💡🌈

[njengathegeek]

I spent the weekend watching your youtube videos, They are crucial to me.

[obechi-onyemagbor]

I just watched this, and damn, I'm

[ainsliefletcher]

OMG THANKYOU for this explanation. This has helped clear up so much about grid planning for me!

[mervekook]

I spent the week+weekend with your marvelous Figma course. I didn't understand why it's 329px at the beginning, but now it's clear. Finally, it makes sense why I had a Mathematics degree and why I wanna be a designer, thank you! :)

[miqdamsajid]

That's definitely useful, never think of these guides this way

[spacemike]

this is where you start to understand the level of people's real education )

[hazelandrews]

That was awesome. I have learned so much from you

[harshadvani]

Now I learned the mechanism behind the responsive grid layout. Kindly teach the 'framer' prototyping tool.

[grafartist]

Great video!! This past weekend, I got a chance to visit a new zoo for a seven year old's birthday celebration and I also posted my first UI design project (my General Assembly final project). I have not watched Shang-chi yet. I've heard really good reviews but I may wait for it to be on Disney+ since I don't think it's in theaters near me anymore.

[eliki]

Thanks for explaining your point easily

[sonoftroy]

Hey Mizko, thanks for showing us the math behind the grid layout. There was something I wasn't sure about though. Why set the grid to stretch instead of center? Thanks for your feedback.

[shahabuddinahmedohi]

Off-Topic: After Avengers End Game movie Shang-Chi is one of the best movies I've ever seen. What a visually works on it! Just mind-blowing

[matthewhyslop]

Great video! I saw the same Marvel movie, it's great!

[kingrest]

wow would like to know more on App responsives

[FlyByWheels]

want to know about types of layout used for web, mobile, table can you make a video on this topic