Floats, Flexbox, Grid? The progression of CSS layouts

CSS is confusing enough, and now in 2018 there are so many different options out there, from floats to flexbox to CSS Grid.
This video takes a look at why we used floats for layout, and how things have progressed to flexbox, and now to grid to give a bit of a historical look at it all, as well as some ideas about what you should be using today.
This article was heavily influenced by Modern CSS Explained for Dinosaurs by Peter Jang: / modern-css-explained-f...
CodePen: codepen.io/kevinpowell/pen/gz...
Timestamps
Floats: 3:10
Flexbox: 12:14
Grid: 17:26
Browser Support?: 25:00
---
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

[@auss6328]

As a beginner, this sort of historic overview with a focus on what the tools were intentioned for is extremely helpful!!!

[@alexanderhorner]

Austin Curtis - aggree

[@blonduose]

Yes, I really appreciate to know how easier it has become to learn WEB dev, through ES6 on JS, through flexbox and grid and sass (even though I don't know sass yet :D ) And when I learned grid by myself on freeCodecamp I just didn't get it, when Kevin explains it, because it is a video walkthrough with more real life examples than some rectangles, and because he is a really good teacher, I just start understanding how things work

[@matheusosa]

Totally agree! This is the third time I'm trying to build my own websites and I always get stuck on layout and it makes me crazy cause sometimes I just don't have enough logic to understand what's wrong so I usually quit. Now with grid I will be able to build my layouts and focus in what really matters. Thanks a LOT Kevin. I just bought an online course and he uses flexbox to build the layout, and now that I know that there are an easier way, I will just jump to understand grid system. Flex was good enough to me but grid is perfect now. Please make more videos about the history of CSS or other languages and whats being used now. It is a very good way to organize new knowledges (as a noob).

[@cswalker21]

Especially since you will probably come across a lot of legacy pages that people want you to fix once you are not a beginner anymore. It's nice to know what the heck you're even looking at in those cases.

[@pivotal-ai]

Yes, exactly what I was after! Some context!

[@eliskakorcova4389]

flexbox and grid: exist our teacher: okay so lets learn about this super cool and definitely useful thing called float

[@brandondapro]

Mustafa Can it’s important to realize that a lot of teachers on subjects are experts for their time; they probably haven’t familiarized themselves with the new tech because they’ve focused on creating teaching material on the old stuff they already do know. This isn’t completely useless though, a lot of concepts are shared between each and knowing one definitely makes learning another easy.

[@schwanensee4488]

@@Yojimbokun Yeah is just bad when new technics didn't find even mention in class. I think teacher have a but of a probleme to, to be honest, that they maybe don't know enough, for that they teach the old and are maybe to proud to say "there is something new, but i don't know about it, inform yourself".

[@SebastianZartner]

It's really sad when teachers aren't up-to-date when learning CSS. As Kevin mentioned, though, float layout is not dead. There are still use cases for it, though nowadays the use cases are really just for floating content around some other content. This is especially interesting in combination with the 'shape-outside' property, which allows you to define shapes to float around like in printed articles, see developer.mozilla.org/en-US/docs/Web/CSS/shape-outside.

[@yashdesai8372]

Lmao !!!

[@slapmyfunkybass]

@@schwanensee4488 The teacher was probably right not to teach it. This is the problem with new people learning development, they always come in with current trends and think that’s the way forward. In reality you what a website that’s going to work for as many people as possible. Floats came out with the birth of CSS, you know using that will work on as many legacy devices, browsers etc as possible. Why would you want to alienate 50% of your audience for a current tread? What’s worse, working in development around 95% of your job will be working on existing sites. Rarely does work come in for a brand new site. Virtually all of those sites will use legacy code. If you have no idea how floats work, how are you going to work on it? You can’t take out everything with float either as it’s still justifiably used to wrap images and nested table elements. Then you realise that current trend you’ve learned, really has no use whatsoever.

[@chrisboden9820]

Still relevant in 2022. Many thanks for not only this but all of your videos. For a newbie who is self learning, you videos are unbelievably valuable!

[@gamalielreynoso3692]

This saved me from wanting to punch my laptop's screen

[@mobarakjama5570]

Too late for me, I could've been saved xD, but awesome content otherwise.

[@derekborders9647]

I appreciate the use of SCSS in a video that isn’t specifically about SCSS.

[@nuniezjorge]

i like how well organized and informative the content of this channel is, things become clearer when judged by their usefulness on different situations rather than expressing frustration or hype

[@riaznapa]

As a newcomer to web designing I was wondering about float, flex and grid. Thanks for such an informative video.

[@t20sgrunt36]

You sir are !important. Keep up the create videos

[@KevinPowell]

Hahaha, that's awesome. I wish I was better at puns :P.

[@LittleStoneDogs]

@T20's Grunt - In programming the exclamation mark ("!") is the logical NOT operator. So what you said is "You sir are NOTimportant. Keep up the create videos".

[@LittleStoneDogs]

LMAO - it has been so long since I took any css courses I totally forgot about that. Even back when I was doing layout and design, I don't remember even needing it...... The client-side dev's at work are going to get a real kick out of this.

[@keplerpierre7783]

@@LittleStoneDogs dumbass i think they were complimenting the channel

[@cleitonakaspyda]

@@keplerpierre7783 he acted dumb trying to be smart so classic....maybe something like- this .channel{ you .are:awesome !important; width:100%; heigh:100%; } /* now i'm acting dumb trying to be dumb */

[@MrRedstonefreedom]

Kevin this has been extremely useful -- in a field with such a "history-induced best-practice distortion", having someone walk through "oh this is the way we used to have to do things in this field, but now we don't have to because of...." really helps me navigate the frontend as someone who had only ever done backend stuff & missed all those conversations. Thank you!

[@leeshrobin]

I've learned so many things because of your videos. Great work!!

[@KevinPowell]

Thanks a lot Robin, glad to know you're enjoying my videos!

[@hazelness14]

I was getting confused about all the different layout methods I was seeing in my textbook and tutorial videos, and this video was EXACTLY what I needed. Thank you!!!

[@digigoliath]

Wow, this newbie in 2019 is really glad that the table is no more a design tool! Great intro & comparison Kevin. Deep diving into Flexbox & Grid now.

[@yassinerassy6840]

I hade a lot of problems with that and I find my self lost with all those techniques thank you for sharing that awesome tutorial !!

[@wolverine9632]

Super helpful, thanks! I "learned" HTML/CSS in 2011 when I was 14, and haven't touched it since. I just recently started my first website, and wanted to learn the new and better techniques available today. It's so much easier now than I remember it being back then!

[@taranbirsingh2927]

You sir, are a brilliant teacher! ♥️✌️

[@irvingalvarez6080]

I love grid with flexbox! You're awesome!

[@MsINSANE2]

I am a student just finishing my first web design class and you just saved my butt on doing the final project.

[@eslamheshamworld]

i was confused the last days and you simplified things for me, great great video thank you

[@MrBaykalcelik]

You are like an encyclopedia. these lessons are the best lessons in youtube. Thanks for your efforts sir.

[@noodletribunal9793]

this was really helpful. i learned float first, then im just starting with flexbox and then heard about grid and was like "why so many?". this helped to give me an "intended purpose" to aim for with each one. cool vid!

[@pemadechen9901]

I am just starting with the tutorial but the thing about this video is it's totally speaking what I have always been wondering ...Can't be more grateful ....But have more to unveil once I am done with the video and I know it ..Thank you, Kevin Powell, for You r an angel...

[@GeorgeFlorian12]

Please put in the description of the video all the tutorials you've mentioned here. Thanks ! Otherwise, you are an awesome KZbinr and I've been learning a lot from your videos ! Thank you for creating this quality content !

[@pivotal-ai]

Exactly what I was looking for. Good job!

[@AshinIgnatius]

Loved the way you compared the three approaches 👍

[@marinastanic]

Hi Kevin! Just sayin - this was EYE-OPENING!!! CSS is new to me and I 've learned so so soooo much from you already! Thank you so much for doing this work!

[@harleyspeedthrust4013]

I use flexbox at work but I'm definitely going to start using grid. It could have made my life easier many times in the past. Thanks for the introduction, I loved the video

[@CrackerJayherber]

Thanks as always for your work. I'm just starting at the beginning as a developer, and by that I mean I'm learning how to put the layouts together using floats etc. This will get me more used to the fundamentals first before going to grid or flexbox.

[@viktorvarga6169]

i was so confused today about float and flexbox. for me you summarised perfectly everything i needed to know for starters! thank you

[@fratut]

Just started learning html and css and I'm happy I found your channel :D

[@mathewcarnaby]

Your explanations are fantastic - thanks Kevin! I jumped from tables (many years ago), to float, to grid. Missed flex altogether. Feels good to round out that understanding.

[@KevinPowell]

Glad that you like content Mathew! From float to grid must have been pretty liberating!

[@AzharulRafy]

Well, so this is why I have been suffering to get a good output with 3 columns in a section using FLOAT property! Time to learn a little Flex things and to focus on GRID usage! Thanks for this video 😍

[@vinc390]

Thank you a lot! Very nice and well produced video!

[@olavodias]

You are an excellent tutor. Thanks for sharing your knowledge with us.

[@MARIUTSKI13897]

The float issues are very well explained, they're not enough automatized and it's really anoying. Great video!

[@TheCAG1976]

A bit about me... I’m a becoming developer. I jumped on the band wadding over a year ago teaching myself HTML, CSS, and JavaScript through books. Also PHP for forms. I’ve only a week ago learned of grid because a CSS book I’ve used is a bit dated so I’m excited to know what it can do! I found this video because I didn’t know the names of these three mothers but you explained them well. I realize that I’m a floats man and and now switching to grid!

[@MrFedX]

Amazing video! Having the reasoning behind where it all comes from gives context and that will help me actually remember in the future.

[@juanmejia7096]

Never knew how the three related to each other until now. Subscribed. Thanks Kevin.

[@duminduakalanka9340]

You are so awesome. Always on point and explain everything quickly.

[@freezemasterslick]

Since you asked: I started learning webdesign about 9months ago. I was first put onto flexbox, awesome tool, makes a lot of sense. Then I quickly ran into float, and work arounds: clear, content,etc. I thought this is baffling. Then ran into grid, I figured this looks awesome, but now it arose the question of which should I use for thinking about layout. Then, finally, I found your video after seeing you on a CSS battle, and thought "you read my mind". Thanks for such a great video. You got my like and suscribe.

[@jeremy2217]

Clear and understable for a non native english speaker, thank you sir, i learned a lot :)

[@KevinPowell]

So glad to hear that, and happy that you learned a lot!

[@brian554xx]

I really appreciate this progression. Would love similar with HTML, since I first learned it when www was a new idea and we were skeptical of it. HTML has come a long way!

[@diamand1st]

This video improved my life expectancy

[@naimurrahman9979]

I feel very much comfortable with your videos. You are a great teacher...

[@davitjanashia9344]

I like that you are honest about the source! Anyway very nice content!!

[@mitzee8621]

Really appreciate you making me aware of grid. I am still very much learning and sometimes find achieving something with flex a little unintuitive. It's good to have more options.

[@oioidarling9404]

Thousands of videos on how to use all these different techniques, but next to none on what their purposes are. Thank you so much for this from a confused CSS beginner!

[@branislavcavic5886]

Great content and your explanations are straight forward. Definitely using both flex and grid. Grid support is decent at the moment, at about 88% so with Feature Queries you can pretty much do what you want. Glad that I don't have to use floats any more, felt pretty hacky.

[@KevinPowell]

Totally, using floats it always seems like you're fighting against the browser to force things to work, could be so frustrating.

[@rushabhpatel4291]

Thank you for this video. As always very helpful.

[@KevinPowell]

No problem at all Rushabh Patel, glad you liked it :)

[@FlareGunDebate]

This video is a rare gem. Keep of the great work.

[@KevinPowell]

Thanks!

[@taweesakarchawamaitreekool4078]

Thank you so much, I have watched many of your videos. Your channel has become my great classroom

[@sumankathet2560]

As usual great content....

[@KevinPowell]

Thanks :D

[@kevinmc5249]

Great overview video. Thanks.

[@tanasevalentin540]

This is an amazing video. I can understand now how and why we need these

[@ppssnn279]

I'm really happy to take time to watch this video from the beginning, although I knew about float and flexbox, it was a nice refresh about their original purpose. Finally the part about the grid really blew my mind, I saw it couple of time in newsletter and few tweets, but never really dig into it. But thanks to your video I'm definitely going to put that into practice!

[@KevinPowell]

So glad to hear that I got you excited for grid! It really is a game changer.

[@iljakbukav9689]

That is an amazing video , Thanks for sharing your knowledge with us.

[@mohan9285]

These kind of contents or the topics are very useful and interesting. I like all your videos. Cheers :)

[@andrearomerosab]

This was very helpful! Thank you so much!

[@stefanw8203]

Great explanations. Thank you very much for this

[@favouritejome]

Really helpful, thanks for the explanation

[@parthkumarchaudhary]

This is what i am looking for... Thanks Kevin Keep uploading this kind of videos

[@KevinPowell]

Really glad that you liked it Parth!

[@baileypownell3992]

Bless you, Kevin. Bless you.

[@indrajith6042]

thanks kevin.. this video helped me alot. Great work

[@expukpuk]

Thank mate - nice and informative presentation.

[@yodaheabebe7268]

As complete newbie, I'm so grateful for this video.

[@rafafauzi5868]

always great video kevin i love it!!

[@KevinPowell]

Thanks a lot :D

[@jaimesastre6393]

I agree about grid! My last layout I got lost with my structure specially on reducing size of window in responsive way, so I moved all on grid, and it got so easy and fit perfectly as I wanted. A great tool! Thanks for this great presentation that resumes perfectly.

[@KevinPowell]

Fun that so many people are picking up grid so quickly, it's awesome :).

[@jaimesastre6393]

Yes! It really is! Probably becoming next standard, like it was for the old tables before ... ;)

[@juralaes123]

Just what I was looking for...thanks a lot!!!

[@randelnowell2159]

Your content is really helpful and educational, thank you for doing these! I'm new to HTML and CSS, after I get the hang of both, I plan to learn JavaScript so I can design webpages.

[@nina7416]

Good luck ,I am learning CSS too

[@racker9999]

Kevin: You're teaching method is fabulous. I love the small bite philosophy for each video and the fact you don't have distracting music or "unique" personality branding gimmicks. I see you've even simplified you background to a neutral gray-brown which is is also helpful. At some point I'd like to see you do one of your 5-minute videos on the essential step for web page creators to make sure to add the HTML 5 viewport meta tag for mobile phones into every HTML page they create. I spent about a day trying to figure why my code was not producing the correct sizing on mobile phones. You could have solved that problem for me in one simple 5-minute video! Great channel and terrific teaching!

[@KevinPowell]

I'm glad you like my teaching style Ron! As for my background, I changed it again to remove the green screen more recently, lol.

[@boaz411133]

Thank you for doing this!! It’s help!!

[@atishayjain1303]

I am new to web dev and I too have been banging my head why floats are not working properly, how flex work, etc. This video helped a lot.

[@shreeshylaHS]

Awesome presentation.. Nice intro for a flex journey

[@KevinPowell]

Glad you enjoyed it!

[@ajjo5513]

Thanks for putting such amazing content. Your passion for CSS, calm and composed personality and in depth knowledge will make this a go to channel for everything CSS related, for me. A lot of appreciation for the structured and well thought out manner of explaining things. For someone who started learning web-dev when flexbox was already in use, this gives a bigger picture of how layouts have evolved and helps put things in perspective.

[@KevinPowell]

Glad you enjoyed it!

[@CarolinaQVargas]

Very helpful, thanks bro 👍

[@marcellocalabresi6018]

your video is pure gold! 🏆🥇🏅

[@Tubingonline1]

Fantastic video, this is a dream come true! Hope browser support improves fast!

[@KevinPowell]

Browser support is actually really good already! Other than Opera Mini, I'm not sure if any browser that doesn't support it today will ever support it. IE11 is the biggest issue with it's partial support really.

[@KD-xp4di]

Kevin Powell does people still use IE?

[@dzengiztafa7964]

A VERY informative video. Thanx for putting this up... Was going to watch the videos you mentioned about flex-box and grid. You said they were in the description but they don't seem to be there though

[@muradquliyev6448]

Thanks so much for the great lesson.

[@marco8673]

that was exactly what i was looking for!!!!! thank you very much, u earned a new sub:))

[@NickName-ul2cf]

Thank you Kevin.

[@techiesrikanth2447]

Awesome, content. Thanks!

[@babayaga5848]

i like the way you explain stuff, keep it up man we ♥ you

[@KevinPowell]

Thanks a lot BABA Yaga, glad you're enjoying my content :)

[@omairij]

Hard to believe that we are getting this quality lessons for free!!!

[@fersahahmet9597]

yeahh.. great teaching ability with perfect knowledge. I can not be more grateful

[@mementomori8856]

THIS is what I needed 👏

[@igor972]

Very helpful! Thanks

[@Gelo09]

Thank you for that. Love it. I am on newbie in html css. And Again,Thanks💕

[@patmat.]

Great video. One suggestion, : It would be clearer for this case study to have one file per case.

[@oscarahlke1585]

Already a thumb up for the Star Wars quotes! :-D And another one for this great tutorial!

[@TheCAG1976]

Wow! I’m just now watching this and about 10:29 of your video is exactly the problem I’m having for my gallery and that’s because I’m using floats. I’ve only just begun using grid and I think I’ll change my gallery to a grid layout.

[@perkin524]

Hi Kevin. These videos are brilliant - I love 'em! I would like to see one giving your take on a CSS-only slider.

[@KevinPowell]

I've played with one a long time ago. The biggest issue is dealing with the timings of the animation to get things to work properly, if I remember correctly.

[@perkin524]

Well a jquery one would be good too. There are certainly many other videos on that subject but you always add something new such as css-grid and little known pseudo-variables. I have never failed to learn something new from one of your videos.

[@kuroshzamani1775]

awesome video!

[@TheMonkeyworkshop]

Hey Kevin! Grid definitely looks worth learning. I remember back in October or so, I started learning Web Development through some of your videos. I discovered float and thought that was cool (actually I commented a great graphical video that explained the layering of it in your comments.) As of recently I learned about Flex Box. I am currently a Grow With Google scholar in the Udacity FEND Nanodegree. They encourage the use of Flex Box. They have not touch on grid at all. I assume that is because of browser support is still being an issue. I fell in love with Flex Box though. Now after watching this video on Grid. I think it will definitely be an amazing option soon to come. Keep making great content!

[@KevinPowell]

Grid support is good though! But it's relatively new and will probably be a little before courses like that start to integrate it. Out of curiosity, how is the Nanodegree at Udacity?

[@TheMonkeyworkshop]

Kevin Powell Oh, I definitely agree and will definitely learn it after this course! The Nanodegree has taught me alot, but like all online course. It lacks some things. I feel that it can be a little to rushed. It also lacks follow up practice on everything you learn. Sometimes they also show things, like a hamburger menu for example and then they never explain it. I find I learn the most from the projects. Like right now I am slaving away on the most code I have ever wrote in Javascript. It is for a memory matching game. The structured learning seems to help me stay on tract though. After this course I plan on learning in a more self taught way. I have not had much luck on paid courses. I would definitely say your videos have a lot more "meat" to them then some of there courses. I will say however. It is one of the better paid courses that I have done. It will teach you a lot of tools and help you learn a lot as well.

[@PerryCodes]

1:21 Kevin is such an unbelievably nice guy... he even has a difficult time trying to say, "I took something that somebody else made and improved upon it." !!!

[@bhanuprathap3170]

Super cool tutorial

[@karansvnit]

All the reviews here made me watch this whole video diligently otherwise I just skip this kinda long videos.

[@shauntonesify]

Thanks for the content brother, you earned a sub here.

[@KevinPowell]

Glad you liked it, and thanks for subbing :D

[@Metruzanca]

I've actually inspected some sites and noticed they used table-based layouts. Since at the time i was learning web scraping, those sites proved interesting to traverse xD

[@missinglink2416]

awesome content... Wish you more subscribers!!!!

[@chrisclinejax]

another great video Kevin. As a beginner I get the impression that I should not spend too much time learning floats or flex since grid replaces them. Your thoughts?

[@rizkallahsalloum]

I use overflow:hidden; instead of clearfix::after Thank you for the videos

[@KevinPowell]

That works too! I probably should've mentioned it.