How to Calculate Responsive Grid Layouts (STEP BY STEP!!)
ฝัง
- เผยแพร่เมื่อ 19 ก.ย. 2024
- My Ultimate Figma Design Masterclass (1,800+ students. 90+ Videos. 10+ hours.) 👉 thedesignershi...
Shipfaster UI - Advanced Figma Design System (1,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets) 👉thedesignershi...
Sign up to my newsletter for exclusive content:
mizko.net/news...
Follow me on IG (Daily updates):
/ themizko
===
🔗 Links
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
Twitter: / mizko
Level up with all my design courses and resources: thedesignershi...
Learn The Difference Between UX Design & Product Design 👉 th-cam.com/video/QqacYMhRf7Y/w-d-xo.html
Yours truly,
Mizko
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
100% responsive layouts are 'fluid'!
I remember seeing 2 classes with names container and container-fluid never really understand the purpose...
Legend!!! Should start calling you Mizko Edison for all the light bulb moments!!! 😁💡🌈
Please do 😂
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!
it's ok :) We got the gems 💎 in between
New subscriber and loving your videos.
I totally got what you meant despite the gutters/margins mix up 🤪
No worries..I understood what you meant 🤣
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!
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!
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! :)
I spent the weekend watching your youtube videos, They are crucial to me.
Now I learned the mechanism behind the responsive grid layout. Kindly teach the 'framer' prototyping tool.
Seen Shang Chi too. Loved it!
Ha! It was the perfect balance of culture, entertainment and marvel legendary-ness. Thank you for being a TRUE SUPPORTER!
That's definitely useful, never think of these guides this way
Thank you Miqdam!!
OMG THANKYOU for this explanation. This has helped clear up so much about grid planning for me!
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.
Thank you! Oh, congrats! What a splendid weekend. It's definitely worth the watch and thank you for being a TRUE SUPPORTER!
this is where you start to understand the level of people's real education )
Thank you! This is the best way to explain vertical grid.
I just watched this, and damn, I'm impressed!!!!!!
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
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.
Stretch = Responsive because it will always stretch and constrain the the edges.
Center = If you want your content to be centered of the page.
You can choose either, depending on what type of layout you want to achieve.
@@Mizko Thanks, I'm currently using Figma to create my portfolio. I never noticed that in the settings. Your video helps me better understand Figma's layout system.
Thanks for explaining your point easily
Love your thumbnails 👌
Haha! Thank you Prip you legend!
That was awesome. I have learned so much from you
want to know about types of layout used for web, mobile ,table can you make a video on this topic
What about when we have a side navigation menu. How do we do the responsive grid @Mizko
can you explain how to use layouts on diffrent websites or mobile or tablets
Thanks Mizko.
The basic question I ponder upon is - Is there any logic in choosing the margin & gutter spacing ? Why did you choose them 32 & 20 respectively ? Can we just choose any number ?
You can the container can be any size
Great video! I saw the same Marvel movie, it's great!
Loving your videos man! With responsive design - how do I make it so when I alter the width of the main frame (essentially a viewport), an image will keep its FULL aspect ratio? So when the viewport width increases, the width and height of an image increases? Thanks
You can maintain the width by using constraints of background images in shapes, but you can't increase the height yet. I'm sure there will be an update coming in the future.
@@Mizko Ah I see. That’s a bit of a bummer! So essentially, if I want an accurate responsive design … I have to keep resizing the images?
wow would like to know more on App responsives
Explained well
Thank you Rohan you legend.
Is it okay that width of column is a decimal number?
it's not better to have 24px gutter+outside margins, to avoid decimals ?
Thank you so so so much !!
👌🏼
Shang chi was good 😌
I’ve been to the theater a few times in the past couple months
Woo! Thank you for being a TRUE SUPPORTER 🎁
Hello @mizko, is there a rule also regarding accessibility for grids and breakpoints?
Thank you very much in advance!
Hi Mizko, very nicely explained. Can you please help me how to set up the grids for desktop 1366 px? Also tell. me when creating side navigation, will it be the part of grid system (12 column) or after making the side navigation around 72 px or 256 px and then the rest of the available space has 12 column with offset 79 px? I am confused. Please help
but this completely depens on the size of the gutters right?
Can one column have 1 additional pixel? I set up a dashboard 1440x1024 100px margin 24px gutters and the width of the columns are sometimes different (1px difference). Did I just ruin the design system that I’m working on? It just stretched this way.
OK lets learn
Let's go!
Hi, I am building my first saas application, it's a booking system but I wanted to know how do you decide how many columns something like that should have and is there a process you go through when deciding on the amount of columns. I have read that for complex saas applications with dashboards, sidebars, graphs etc that people start with 20 sometimes even 30 but I am struggling to understand how this is decided.
Thanks man.
Genious!
You could simply design the container at 1200px. Everything is 8px grid. The container can be any size.
I have a question about the page/section height. When I watch design videos, most often when designing for desktop screen sizes designers use a 1440x1024 frame however the actual viewport height of the browser is usually significantly less. As a developer I can either make the section vertically responsive and make each section fit perfectly into the vh(viewport height) or keep the height pixel perfect to the design and just accept that on many devices the bottom of the hero section for example would not be visible until the user scrolls down. I am a developer with a some design skills but I'm very green In web design so I imagine this may be obvious for some however I was curious if there was a concrete/industry standard solution or if this is more of a judgement call.
Awesome!
Thank YOU!!!!!
Isn't 20px space between the columns too small for you? I use 51 because if I put paragraphs next to each other, 20px space between them horizontally is too close.
I think you shuffled gutters and margins at around 4.20. 11 Margins? Those are actually gutters and you can have only 2 margins.
Cheers to Legendary Designers!
💯🔥
⚡️
👍 👍
It's not rocket surgery xD
Are you telling me you would rather do all that math then to take a rectangle tool and place it over the first 3 columns to get the width??? 🤔
My student asked 'Why'. Showing 3 rectangles doesn't tell why, it shows what the width is.
5m0lh1
#von.ngo