Floats, Flexbox, Grid? The progression of CSS layouts

Подписаться 912 тыс.

Просмотров 288 тыс.

50% 1

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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

22 май 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 382

@auss6328 4 года назад

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!

@eliskakorcova4389 4 года назад

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.

@chrisboden9820 2 года назад

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 5 лет назад

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.

@nuniezjorge 4 года назад

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 4 года назад

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

@MrRedstonefreedom 3 года назад

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!

@derekborders9647 2 года назад

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

@t20sgrunt36 6 лет назад

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 */

@hazelness14 2 года назад

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!!!

@noodletribunal9793 2 года назад

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!

@leeshrobin 6 лет назад

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!

@GeorgeFlorian12 5 лет назад

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

@digigoliath 4 года назад

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.

@marinastanic 3 года назад

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!

@MsINSANE2 4 года назад

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

@pemadechen9901 5 лет назад

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...

@wolverine9632 2 года назад

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!

@eslamheshamworld 4 года назад

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

@yassinerassy6840 4 года назад

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 !!

@MrBaykalcelik 2 года назад

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

@viktorvarga6169 3 года назад

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

@AshinIgnatius 5 лет назад

Loved the way you compared the three approaches 👍

@mathewcarnaby 5 лет назад

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!

@oioidarling9404 4 года назад

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!

@harleyspeedthrust4013 3 года назад

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

@taranbirsingh2927 4 года назад

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

@irvingalvarez6080 5 лет назад

I love grid with flexbox! You're awesome!

@freezemasterslick 3 года назад

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.

@CrackerJayherber 3 года назад

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.

@pivotal-ai 3 года назад

Exactly what I was looking for. Good job!

@AzharulRafy 4 года назад

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 😍

@juanmejia7096 3 года назад

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

@fratut 5 лет назад

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

@duminduakalanka9340 2 года назад

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

@MARIUTSKI13897 5 лет назад

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

@mitzee8621 7 месяцев назад

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.

@MrFedX Год назад

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

@TheCAG1976 4 года назад

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!

@jeremy2217 3 года назад

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!

@vinc390 5 лет назад

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

@olavodias 5 лет назад

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

@sumankathet2560 6 лет назад

As usual great content....

@KevinPowell 6 лет назад

Thanks :D

@davitjanashia9344 4 года назад

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

@branislavcavic5886 6 лет назад

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.

@diamand1st 3 года назад

This video improved my life expectancy

@taweesakarchawamaitreekool4078 5 лет назад

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

@FlareGunDebate 5 лет назад

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

@KevinPowell 5 лет назад

Thanks!

@naimurrahman9979 4 года назад

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

@atishayjain1303 4 года назад

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.

@mohan9285 4 года назад

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

@ppssnn279 6 лет назад

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.

@baileypownell3992 5 лет назад

Bless you, Kevin. Bless you.

@brian554xx 3 года назад

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!

@tanasevalentin540 2 года назад

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

@rushabhpatel4291 6 лет назад

Thank you for this video. As always very helpful.

@KevinPowell 6 лет назад

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

@kevinmc5249 4 года назад

Great overview video. Thanks.

@racker9999 5 лет назад

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.

@parthkumarchaudhary 6 лет назад

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

@KevinPowell 6 лет назад

Really glad that you liked it Parth!

@andrearomerosab 2 года назад

This was very helpful! Thank you so much!

@iljakbukav9689 4 года назад

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

@jaimesastre6393 6 лет назад

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 ... ;)

@stefanw8203 3 года назад

Great explanations. Thank you very much for this

@indrajith6042 5 лет назад

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

@yodaheabebe7268 3 года назад

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

@favouritejome 4 года назад

Really helpful, thanks for the explanation

@dzengiztafa7964 5 лет назад

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

@rafafauzi5868 6 лет назад

always great video kevin i love it!!

@KevinPowell 6 лет назад

Thanks a lot :D

@expukpuk 6 лет назад

Thank mate - nice and informative presentation.

@randelnowell2159 3 года назад

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

@ajjo5513 4 года назад

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!

@juralaes123 4 года назад

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

@boaz411133 2 года назад

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

@NickName-ul2cf 3 года назад

Thank you Kevin.

@marcellocalabresi6018 4 года назад

your video is pure gold! 🏆🥇🏅

@CarolinaQVargas Год назад

Very helpful, thanks bro 👍

@Tubingonline1 6 лет назад

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?

@igor972 Год назад

Very helpful! Thanks

@mementomori8856 4 года назад

THIS is what I needed 👏

@TheMonkeyworkshop 6 лет назад

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.

@techiesrikanth2447 3 года назад

Awesome, content. Thanks!

@marco8673 4 года назад

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

@PerryCodes 2 года назад

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." !!!

@shreeshylaHS 6 лет назад

Awesome presentation.. Nice intro for a flex journey

@KevinPowell 6 лет назад

Glad you enjoyed it!

@patmat. 4 года назад

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

@muradquliyev6448 4 года назад

Thanks so much for the great lesson.

@kuroshzamani1775 4 года назад

awesome video!

@perkin524 6 лет назад

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.

@karansvnit 3 года назад

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

@bhanuprathap3170 4 года назад

Super cool tutorial

@TheCAG1976 4 года назад

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.

@Gelo09 4 года назад

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

@knghtbrd 3 года назад

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.

@Metruzanca 5 лет назад

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