Responsive Multi-Column Layouts Using CSS Flexbox

FULL STACK COURSE (React, Flask, & PostgreSQL): lukepeters.me/build-a-full-st...
You don't need Tailwind, Bootstrap, or any other CSS framework to make some nice responsive multi-column layouts with fixed gutters. Flexbox makes it super easy to create two column layouts, three column layouts, and any other variation quickly.
0:00 - Intro
0:13 - Write the HTML and CSS for the responsive columns
5:10 - Add a media query for smaller screens
5:40 - Make sure flexbox items can wrap
7:09 - Use the box-sizing property to prevent inconsistent column widths
8:11 - Adding full-width, third-width, and quarter-width columns
11:36 - Wrapping up
---------------------------------------------------------------
PROJECT RESOURCES
➡️ Check out the final code: codepen.io/lukepeters/full/KK...
---------------------------------------------------------------
RECOMMENDED WEB HOSTING
I swear by Linode. I've been using them for years and I refer every freelance client to them. Here's my special referral link if you want to help me out a little: lukepeters.tech/linode
---------------------------------------------------------------
MY DESK SETUP GEAR
⌨️ Keyboard - amzn.to/3sR3WEK
🖱 Mouse - amzn.to/3aEBvnc
🖥 Monitor - amzn.to/30pmuzd
🦾 Monitor Mount/Arm - amzn.to/3sLd3Xu
🎤 Microphone - amzn.to/3sRfxUb
🦾 Microphone Arm - amzn.to/3xrxImT
🎛 Microphone Processor - amzn.to/3gConme
⚡️ Thunderbolt Dock - amzn.to/3aE8aJC
🔊 Speakers - amzn.to/3nip0D0
🎧 Headphones - amzn.to/3xoCVfm
🪑 Chair - amzn.to/3eBIw9I
---------------------------------------------------------------
Intro music produced by Connor Curley

[@LukePeters]

➡️ Check out the end result here: codepen.io/lukepeters/full/KKWWQLM

[@worldclasscode1847]

Great video on Flexbox! So important :)

[@yutthapoomchainet8789]

Creating layouts with flexbox is really cool. Thank you Mrt. Luke Peters

[@LukePeters]

I agree! :)

[@agalligani]

This is great! Very easy to understand. Thanks

[@LukePeters]

Glad to hear it!

[@peterparker2460]

This is best video on the internet on Flex box and its main use. Thank you so much for this. I was searching for something like this from last 2 days.

[@LukePeters]

Whoo! Glad you found this helpful.

[@racheludesign]

Super helpful, thank you!

[@tthompson9509]

Excellent video. Easy to understand.

[@LukePeters]

Thanks for the feedback! Glad to hear that.

[@sandeep816]

Fantastic Luke 😊

[@LukePeters]

Thank you, Sandeep!

[@raikotisunny8576]

Just amazing 😄❣️💞

[@badermuteb4552]

this is the video i have been looking for. thanks luke

[@LukePeters]

Cool! Thanks for leaving a comment to let me know 🙂

[@badermuteb4552]

@@LukePeters one question luke : how can we make make col-50 and col-sm-100 in small media screen? how would that work? instead of modifying col-50

[@LukePeters]

@@badermuteb4552 I'm not totally sure what you mean, but you can create as many other specific classes as you need. For example, this class will be 50% wide only on small screens: @media screen and (max-width: 480px) { .mobile-col-50 { width: calc(50% - 30px); } }

[@peterjosh8740]

Thanks so much for this tutorial

[@LukePeters]

You're welcome!

[@john_yeager]

if someone write on this columns and when reach the max height we need a new column to continue there? nice video btw

[@barbarabevort]

Hi Luke, what are your thoughts on using max-width compared to min-width? Especially considering the whole mobile-first design approach. Opinions differ quite a lot online, e.g. min-width for mobile-first. Thanks for sharing!

[@LukePeters]

Hey Barbara, great question! I started my career doing everything with "max-width", but then responsive web design and the whole "mobile first" approach blew up. I've done a lot of "min-width" based projects at this point, but honestly I still prefer "max-width". It's probably just familiarity and my personal preference for computers over mobile devices. The goal of a mobile-first approach is to help you figure out what the most important information/controls on any given page are, so you can plan for those to be very easily accessible and not tucked away in a hidden menu because mobile was an afterthought. With that goal in mind, *how* you get there is less important. I design and build most of my own projects from a desktop-first perspective, but I think a lot about the mobile experience and make sure it's a great one, too. It also depends on what type of project it is. A marketing page for a consumer-oriented product *absolutely needs* to have a great mobile experience or overall conversion will suffer. A web-based application for knowledge workers who need to manipulate large sets of data on a computer screen *absolutely needs* a great desktop experience. If these people will be doing their work on a computer 98% of the time, I'd highly recommend a desktop-first design approach. There are also real-world constraints to consider. A small startup or solo founder with no investment money and a very short runway will need to get an MVP live as soon as possible. They should prioritize the platform (and screen size) their core initial customers will be primarily using. There's a lot of elitism and demonization in tech. "This is the only way, doing anything else means you hate your users", "PHP is the worst thing ever, no one should ever use it", "Mobile-first is the only approach that makes sense", etc. Nothing is black and white. Nuance is key. Anyway, you asked for my thoughts and I have given you my thoughts 😄

[@barbarabevort]

@@LukePeters exactly the elitism and demonization in tech you mention is the reason I asked ;-) so thank you for this elaborate and nuanced answer! Your tutorials are really nice!

[@LukePeters]

@@barbarabevort Haha, yes it's certainly prevalent. Thank you! :)

[@worldclasscode1847]

I am not big on mobile first. But I think Max-width feels better. I used it on some occasions :)

[@lvekua]

What did you use @ 3:12 ? to measure margins? is it an extension?

[@LukePeters]

Hey Levan, it's just the screenshot tool in macOS. Control + Command + Shift + 4. Then I press the Escape key to avoid saving a screenshot.

[@jonnyhall2887]

Easy to follow but at 2:25 after following step by step, the class="col col-50" didnt separate the text into 2 columns. Maybe because I'm using VS-Code. Really not sure

[@LukePeters]

Hey Jonny, VS Code won't make any difference with how CSS is rendered. Check out the finished code here and compare it to yours: codepen.io/lukepeters/pen/KKWWQLM?editors=0100