Oh no, the video couldn't be loaded :(
You can try refreshing the page!

...

High Definition Standard Definition Theater Full screen
Video id : G_UJvYDb3q8
ImmersiveAmbientModecolor: #e7dfdc (color 2)
Video Format : (720p) openh264 ( https://github.com/cisco/openh264) mp4a.40.2 | 44100Hz
Audio Format: 140 ( High )
PokeTubeEncryptID: a2493706a021d880109ca0d1fbd92927835c9903c191b73a376499cc7dcdd1f3107bfcbfc87aaec39e51f67196818bba
Proxy : eu-proxy.poketube.fun - refresh the page to change the proxy location
Date : 1722534301245 - unknown on Apple WebKit
Mystery text : R19VSnZZRGIzcTggaSAgbG92ICB1IGV1LXByb3h5LnBva2V0dWJlLmZ1bg==
143 : true
Best Grid and Layout for Web Design
Jump to Connections
46,671 Views β€’ Dec 15, 2022 β€’ Click to toggle off description
There is ONE grid/layout setting that works for most types of web designs! It's not too wide (as that decreases readability) and has enough flexibility to create multiple different layout types.

Let's explore the basics of web design, layout, ux/ui design in these shorts!

#webdesign #ui #shorts
Metadata And Engagement

Views : 46,671
Genre: Education
Date of upload: Dec 15, 2022 ^^


Rating : 4.924 (82/4,234 LTDR)

98.10% of the users lieked the video!!
1.90% of the users dislieked the video!!
User score: 97.15- Overwhelmingly Positive

RYD date created : 2024-05-28T11:55:43.770929Z
See in json
Tags
Connections
Nyo connections found on the description ;_; report a issue lol

YouTube Comments - 38 Comments

Top Comments of this video!! :3

@mightymoon420

1 month ago

Most underrated Design mentor of the industry ❀

|

@etherean369

1 year ago

So grateful for your content

11 |

@christianmagill3829

1 year ago

Do you have any tutorials/courses that show how you use this setup in a full responsive design? Do you always keep the same container width, or do you use a wider container when thing are side by side? How often are you actually using the gutter widths for separating items?

4 |

@tomaszsledz6600

1 year ago

Thx for sharing!

|

@OreZiY

10 months ago

Right on time

|

@artistad8109

1 year ago

What do you mean by 1120 width? In figma , there is the gutter (32), Count (12) and then there is type = center. and then the width . What should be the width? Usually types 72.

6 |

@greg0ryg026

9 months ago

Thanks for this Malewicz. Can you make mobile app layout grid guide too? πŸ€—

|

@CrackerJayherber

1 year ago

Thank you so much friend for your helpful tips. As in very helpful and practical tips. I cannot wait to purchase your UX material.

|

@patrikmedia

1 year ago

I'll give it a shot. always worked with 12 columns, 1240px, 20px gutter (columns are 85px)

1 |

@Kuruma-gc3yn

9 months ago

why use such a big gutter?

|

@jssecrets

1 year ago

Thanks. And what is going to happen when the screen width will shrink to less than 1152px? How the grid will react? In Bootstrap grid column width is set in percent and columns will shrink accordingly. But here values are fixed.

5 |

@UmairUlhaque

1 year ago

Thanks for the golden numbers Michal. Have you launched your new agency called SquareBlack?

|

@coder244

8 months ago

But what if you don't need 12 columns? Most of the sites need 3-4 columns, then how this 12 columns layout works?

|

@tekiero

1 year ago

so content will be only at the middle of the screen even on 1920p width screen?

1 |

@megatronskneecap

7 months ago

Why can't you save shorts, this feature of the app is so useless

1 |

@rasula9

4 months ago

What is the width of the whole frame used with this grid? (1440px or 1280px or other)

|

@oyekanmipaul8582

1 year ago

Wow. What about the grid for smartphones?

2 |

@Karim-wd2je

1 year ago

How to calculate gutters and margins based on the screen size

4 |

Go To Top