In Web Design, grid systems are invisible structures that collect all the elements together. A structure made up of a series of columns, gutters, and margins used to structure content. Let’s dive into the basics of grid systems in web and UI design. Remember to Subscribe https://goo.gl/6vCw64
Join this channel to get access to perks:
https://www.youtube.com/channel/UCvBGFeXbBrq3W9_0oNLJREQ/join
0:00 – Intro
0:31 – What is a Grid System?
0:52 – How do we use a Grid System?
1:16 – Basic Terms
1:20 – Columns
1:30 – Gutters
1:41 – Margins
2:10 – 12 Column Grid
3:05 – Breaking the Rules
Great Examples of using and breaking the grid
https://stripe.com/
https://www.figma.com/
https://letsxd.com/
————————————————————————————
////////// Connect with me here 👍🏼
Instagram: https://www.instagram.com/iamjesseshow
Twitter: http://twitter.com/iamjesseshow
////////// Sign up for my Monthly Newsletter 📫
http://jesseshowalter.com/newsletter
////////// Elevate your videos with record-label quality music from Musicbed👇🏼
http://share.mscbd.fm/iamjesseshow
////////// Equipment 📸
https://www.amazon.com/shop/jesseshowaltertv
source
Can one column have 1 additional pixel? I set up a dashboard 1440×1024 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.
Awesome Man. Thanks.
Happy I found you Man!
Where are your glasses from? =)
Thanks jesse for the short information
I don't know how to adjust the length of my columns. I'm using an e-learning free wordpress theme. My columns are too long and I can't just adjust them the way we do in Word. Please help.
Thanks, nicely explained.
Which one is good to use when we design a mobile applications and a website, is it column method or an 8 point grid systems??
I cannot imagine a Spanish person trying to explain the grid system… It will take one hours.. 😂That's why I love English speaks.. They are so directly and pragmatic.
I had a hard time understanding the use of the grids generally. I wish instead of buying a course for thousands of dollars I started to learn UI here and there. Then invest in the course.
For a mobile app, I’m using 8 columns. Please can u advice me on the size of margin and gutter I should use?
Can i use different grid for website? Like one type for landing page and different grid for dashboard
Wow, love this.. it's simple and clear, I'm not new to web designing but have always dreaded studying the GRID in depth, my goal is to translate designs into code properly.
I'm looking for your next video now, thank you for sharing your knowledge!
oh jesses
your way of talking is fabulous bro. great, keep it up
Great video for basic understanding of Grid. I always ignore this one when working on UI.
hi, how setup my css under my adobe xd costem design grid?
Great video! You say that you'll save the responsive grid system for another video. I'd love to see that video 🙂
You are amazing!
Bro i love your glasses. Can you tell me the model?
Thanks! Great content!
I just realized how even your walls look like a well organized, stylish website lol! The lights are insane.
Amazing breakdown! Thank you.
can do a video of process of trasforming UI xd/figma file to acual site please? do devs still start from scratch and use UI as guide or will they use the same files to code? thanks a lot
Thanks again for another awesome video. I been out of the design loop for a while now and just relearning everything.
perfect)
Huh…now the bootstrap 12 column grid system makes perfect sense. Thanks Jesse! 🙂