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 KZread channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
Пікірлер: 382
As a beginner, this sort of historic overview with a focus on what the tools were intentioned for is extremely helpful!!!
@alexanderhorner
4 жыл бұрын
Austin Curtis - aggree
@blonduose
4 жыл бұрын
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
4 жыл бұрын
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
3 жыл бұрын
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
3 жыл бұрын
Yes, exactly what I was after! Some context!
flexbox and grid: exist our teacher: okay so lets learn about this super cool and definitely useful thing called float
@brandondapro
4 жыл бұрын
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
3 жыл бұрын
@@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
3 жыл бұрын
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
3 жыл бұрын
Lmao !!!
@slapmyfunkybass
3 жыл бұрын
@@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.
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!
As a newcomer to web designing I was wondering about float, flex and grid. Thanks for such an informative video.
You sir are !important. Keep up the create videos
@KevinPowell
6 жыл бұрын
Hahaha, that's awesome. I wish I was better at puns :P.
@LittleStoneDogs
6 жыл бұрын
@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
6 жыл бұрын
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
4 жыл бұрын
@@LittleStoneDogs dumbass i think they were complimenting the channel
@cleitonakaspyda
4 жыл бұрын
@@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 */
This saved me from wanting to punch my laptop's screen
@mobarakjama5570
4 жыл бұрын
Too late for me, I could've been saved xD, but awesome content otherwise.
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!
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!
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
I appreciate the use of SCSS in a video that isn’t specifically about SCSS.
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.
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!!!
I've learned so many things because of your videos. Great work!!
@KevinPowell
6 жыл бұрын
Thanks a lot Robin, glad to know you're enjoying my videos!
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 !!
I am a student just finishing my first web design class and you just saved my butt on doing the final project.
Please put in the description of the video all the tutorials you've mentioned here. Thanks ! Otherwise, you are an awesome KZreadr and I've been learning a lot from your videos ! Thank you for creating this quality content !
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 😍
Loved the way you compared the three approaches 👍
You sir, are a brilliant teacher! ♥️✌️
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!
You are like an encyclopedia. these lessons are the best lessons in youtube. Thanks for your efforts sir.
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...
I love grid with flexbox! You're awesome!
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!
i was so confused today about float and flexbox. for me you summarised perfectly everything i needed to know for starters! thank you
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
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!
i was confused the last days and you simplified things for me, great great video thank you
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.
You are so awesome. Always on point and explain everything quickly.
Just started learning html and css and I'm happy I found your channel :D
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
5 жыл бұрын
Glad that you like content Mathew! From float to grid must have been pretty liberating!
Exactly what I was looking for. Good job!
You are an excellent tutor. Thanks for sharing your knowledge with us.
Thank you a lot! Very nice and well produced video!
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.
Never knew how the three related to each other until now. Subscribed. Thanks Kevin.
Clear and understable for a non native english speaker, thank you sir, i learned a lot :)
@KevinPowell
3 жыл бұрын
So glad to hear that, and happy that you learned a lot!
The float issues are very well explained, they're not enough automatized and it's really anoying. Great video!
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.
Amazing video! Having the reasoning behind where it all comes from gives context and that will help me actually remember in the future.
Great overview video. Thanks.
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!
I feel very much comfortable with your videos. You are a great teacher...
I like that you are honest about the source! Anyway very nice content!!
This was very helpful! Thank you so much!
Great explanations. Thank you very much for this
As usual great content....
@KevinPowell
6 жыл бұрын
Thanks :D
Thank you so much, I have watched many of your videos. Your channel has become my great classroom
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
6 жыл бұрын
Totally, using floats it always seems like you're fighting against the browser to force things to work, could be so frustrating.
These kind of contents or the topics are very useful and interesting. I like all your videos. Cheers :)
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
6 жыл бұрын
So glad to hear that I got you excited for grid! It really is a game changer.
Bless you, Kevin. Bless you.
Really helpful, thanks for the explanation
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!
That is an amazing video , Thanks for sharing your knowledge with us.
Thank you for this video. As always very helpful.
@KevinPowell
6 жыл бұрын
No problem at all Rushabh Patel, glad you liked it :)
This is an amazing video. I can understand now how and why we need these
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.
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
Thank mate - nice and informative presentation.
thanks kevin.. this video helped me alot. Great work
Thank you Kevin.
Thank you for doing this!! It’s help!!
Very helpful, thanks bro 👍
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
6 жыл бұрын
Fun that so many people are picking up grid so quickly, it's awesome :).
@jaimesastre6393
6 жыл бұрын
Yes! It really is! Probably becoming next standard, like it was for the old tables before ... ;)
This video is a rare gem. Keep of the great work.
@KevinPowell
5 жыл бұрын
Thanks!
As complete newbie, I'm so grateful for this video.
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
5 жыл бұрын
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.
Very helpful! Thanks
Awesome presentation.. Nice intro for a flex journey
@KevinPowell
6 жыл бұрын
Glad you enjoyed it!
This video improved my life expectancy
Just what I was looking for...thanks a lot!!!
This is what i am looking for... Thanks Kevin Keep uploading this kind of videos
@KevinPowell
6 жыл бұрын
Really glad that you liked it Parth!
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." !!!
Thanks so much for the great lesson.
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
3 жыл бұрын
Good luck ,I am learning CSS too
Awesome, content. Thanks!
Super cool tutorial
always great video kevin i love it!!
@KevinPowell
6 жыл бұрын
Thanks a lot :D
Fantastic video, this is a dream come true! Hope browser support improves fast!
@KevinPowell
6 жыл бұрын
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
5 жыл бұрын
Kevin Powell does people still use IE?
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
4 жыл бұрын
Glad you enjoyed it!
Hi Kevin. These videos are brilliant - I love 'em! I would like to see one giving your take on a CSS-only slider.
@KevinPowell
6 жыл бұрын
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
6 жыл бұрын
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.
your video is pure gold! 🏆🥇🏅
Already a thumb up for the Star Wars quotes! :-D And another one for this great tutorial!
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.
awesome video!
Thank you for that. Love it. I am on newbie in html css. And Again,Thanks💕
THANKS SO MUCH!
All the reviews here made me watch this whole video diligently otherwise I just skip this kinda long videos.
THIS is what I needed 👏
I've been using float because I'm not a web developer and … it's what I learned. This channel is changing that rapidly because … if this newer stuff was rapidly becoming the standard in 2018, it's now the only want to go in 2021 unless you MUST have support for obsolete, unsupported, browsers. And I do. But like I don't need to support IE anymore. No. At this point the browsers I need to support are either new enough you are expected to be able to upgrade to something moderately current enough to support flexbox or even grid at this point, or so freaking old that I'm using my old HTML 3.2 Visual Quickstart Guide to look up what is and isn't supported. I don't have much need to support the stuff in between. Not since Windows 7 went EOL last year.
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
6 жыл бұрын
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
6 жыл бұрын
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.
that was exactly what i was looking for!!!!! thank you very much, u earned a new sub:))
I use overflow:hidden; instead of clearfix::after Thank you for the videos
@KevinPowell
6 жыл бұрын
That works too! I probably should've mentioned it.
Hard to believe that we are getting this quality lessons for free!!!
@fersahahmet9597
5 жыл бұрын
yeahh.. great teaching ability with perfect knowledge. I can not be more grateful
This is very helpful
awesome content... Wish you more subscribers!!!!
i like the way you explain stuff, keep it up man we ♥ you
@KevinPowell
6 жыл бұрын
Thanks a lot BABA Yaga, glad you're enjoying my content :)
Great video. One suggestion, : It would be clearer for this case study to have one file per case.