Floats, Flexbox, Grid? The progression of CSS layouts
ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2024
- 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/kev...
Timestamps
Floats: 3:10
Flexbox: 12:14
Grid: 17:26
Browser Support?: 25:00
---
I have a newsletter! www.kevinpowel...
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowel...
---
My Code Editor: VS Code - code.visualstu...
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 TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
As a beginner, this sort of historic overview with a focus on what the tools were intentioned for is extremely helpful!!!
Austin Curtis - aggree
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
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).
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.
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
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.
@@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".
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.
Lmao !!!
@@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.
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!
You sir are !important. Keep up the create videos
Hahaha, that's awesome. I wish I was better at puns :P.
@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".
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.
@@LittleStoneDogs dumbass i think they were complimenting the channel
@@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 */
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
You are like an encyclopedia. these lessons are the best lessons in youtube. Thanks for your efforts sir.
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 😍
I am a student just finishing my first web design class and you just saved my butt on doing the final project.
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!!!
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!
This saved me from wanting to punch my laptop's screen
Too late for me, I could've been saved xD, but awesome content otherwise.
I've learned so many things because of your videos. Great work!!
Thanks a lot Robin, glad to know you're enjoying my videos!
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 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...
Clear and understable for a non native english speaker, thank you sir, i learned a lot :)
So glad to hear that, and happy that you learned a lot!
I appreciate the use of SCSS in a video that isn’t specifically about SCSS.
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 !!
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.
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
You sir, are a brilliant teacher! ♥️✌️
I love grid with flexbox!
You're awesome!
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!
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!
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.
i was so confused today about float and flexbox. for me you summarised perfectly everything i needed to know for starters! thank you
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.
Exactly what I was looking for.
Good job!
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.
Glad that you like content Mathew! From float to grid must have been pretty liberating!
This video is a rare gem. Keep of the great work.
Thanks!
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.
Totally, using floats it always seems like you're fighting against the browser to force things to work, could be so frustrating.
As usual great content....
Thanks :D
Amazing video! Having the reasoning behind where it all comes from gives context and that will help me actually remember in the future.
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.
i was confused the last days and you simplified things for me, great great video thank you
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.
Glad you enjoyed it!
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!
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.
You are so awesome. Always on point and explain everything quickly.
Never knew how the three related to each other until now. Subscribed.
Thanks Kevin.
The float issues are very well explained, they're not enough automatized and it's really anoying. Great video!
Just started learning html and css and I'm happy I found your channel :D
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!
Please put in the description of the video all the tutorials you've mentioned here. Thanks ! Otherwise, you are an awesome TH-camr and I've been learning a lot from your videos ! Thank you for creating this quality content !
Loved the way you compared the three approaches 👍
I feel very much comfortable with your videos. You are a great teacher...
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!
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.
Fun that so many people are picking up grid so quickly, it's awesome :).
Yes! It really is! Probably becoming next standard, like it was for the old tables before ... ;)
This is an amazing video. I can understand now how and why we need these
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!
So glad to hear that I got you excited for grid! It really is a game changer.
I like that you are honest about the source! Anyway very nice content!!
Thank you for this video. As always very helpful.
No problem at all Rushabh Patel, glad you liked it :)
As complete newbie, I'm so grateful for this video.
This video improved my life expectancy
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." !!!
Hard to believe that we are getting this quality lessons for free!!!
yeahh.. great teaching ability with perfect knowledge. I can not be more grateful
You are the master of CSS.
Thanks! There are better people than me out there, but I'm happy I can help people understand it better :)
This is what i am looking for...
Thanks Kevin
Keep uploading this kind of videos
Really glad that you liked it Parth!
Thank you a lot!
Very nice and well produced video!
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.
All the reviews here made me watch this whole video diligently otherwise I just skip this kinda long videos.
You are an excellent tutor. Thanks for sharing your knowledge with us.
Bless you, Kevin. Bless you.
I use overflow:hidden; instead of clearfix::after
Thank you for the videos
That works too! I probably should've mentioned it.
Already a thumb up for the Star Wars quotes! :-D
And another one for this great tutorial!
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.
Good luck ,I am learning CSS too
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.
Great video.
One suggestion, : It would be clearer for this case study to have one file per case.
Great overview video. Thanks.
This was very helpful! Thank you so much!
Thank you Kevin.
This is coding in a sum -- "I fixed this but broke that, then I fixed that but broke this. "
Holy fuck exactly this
i like the way you explain stuff, keep it up man we ♥ you
Thanks a lot BABA Yaga, glad you're enjoying my content :)
Thank you so much, I have watched many of your videos. Your channel has become my great classroom
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.
Fantastic video, this is a dream come true! Hope browser support improves fast!
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.
Kevin Powell does people still use IE?
Great explanations. Thank you very much for this
Just what I was looking for...thanks a lot!!!
your video is pure gold! 🏆🥇🏅
These kind of contents or the topics are very useful and interesting. I like all your videos. Cheers :)
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
THIS is what I needed 👏
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!
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?
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.
Really helpful, thanks for the explanation
As a casual amatuer over 8 years, it is very disappointing that HTML and CSS are so hard to use.
So many techniques.
So many concepts.
So few actual complete tutorials
But I do enjoy your videos
Pseudo elements didn't exist back in the day, when we where using floats, but this help me understand where somo common class names come from.
Young developers can hardly imagine how difficult it was to create a flexible and stable multi-column layout based on floats in the age of Internet Explorer 4/5/6. It feels like I spent years with optimizing multi-column layouts and the required amount of browser hacks was always just overwhelming. My gratitude goes to Mozilla (with Firefox) and the KHTML developers who started to create the first browsers which allowed us web-developers to escape ending up in a mental hospital. Nowadays I am using floats only for some horizontal positioning and its primary purpose (to float text around inline-boxes and images). Grid I am using for the main page layout and inside specific content containers flex-box shines.
As someone who is writing CSS since the release of IE 4.01 I have to admit, that CSS hasn't become easier over time. CSS is nowadays more powerful and much, much more predictable than 20 years ago but at the same time it has become a complex language so that it suffers from the same issues like PHP with a lot of legacy features/functions and structural weaknesses. Therefore it is still a challenge to write compatible, well structured, compact, future-proof and easy to maintain CSS code.
In this context I want to thank you for your excellent videos which even me - with my 25 years experience in web-development - provide ideas, some new tricks and several aspects which I haven't seen that way before.
Thank you for doing this!!
It’s help!!
thanks kevin.. this video helped me alot. Great work
That is an amazing video , Thanks for sharing your knowledge with us.
I have began learning html/css in a online school with 9 month and they where teaching me float stil in 2020. When in found diferent videos on youtube an articels in internet, i was a bit angry to be true. But i'm now learning flexbox, it seams better for my personal understanding and the support is better for the browser. So i will stick with flexbox for the start, and use float only for the floating for text like it supposed to be. Grid can maybe come in some years.
Very helpful! Thanks
always great video kevin i love it!!
Thanks a lot :D
Very helpful, thanks bro 👍
Hi Kevin. These videos are brilliant - I love 'em! I would like to see one giving your take on a CSS-only slider.
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.
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.
Thank you for the history lesson and floats made me stay away from web development as I thought I was too dumb to figure out, but now I realize it was frustrating for everyone bc it was a hack
Super cool tutorial
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
Table-based layouts were not so terrible in the 90s because we didn't have mobile devices, so you only really had to make your sites ' responsive' based on 1-3 monitor resolutions. Basically make it look good on the most popular resolution, while avoiding horizontal scroll bars on a lower resolution. Now CSS was a huge upgrade. I once had a 900 page hotel website as a client..... any tiny style change they wanted required a full day to go through and apply it to all 900 pages.
useful tips: instead of saying "really" three times, you can use repeat(3, "really") instead.
what's cool with it, and I'll show you in a second, that you can do this repeat(auto, minmax(26:59, "really")).