Floats, Flexbox, Grid? The progression of CSS layouts

if you've been around for a while you've definitely seen float based layouts and if you're new to this world of CSS you might have seen a lot of tutorials that look at how to use floats to create layouts well I have a lot of them here on my own channel I've back from when I first started now well looking up stuff you might have run into other tutorials that look at things like flexbox or grid and you might be wondering what is going on am I supposed to use floats what about flexbox and I've been hearing a lot about grid lately what's the deal what's actually going on in this video of me looking at all three of these I'm gonna be looking at which one you should use in what situation what they're really for and you know for when it comes to creating layouts what the best choice is today so my name is Kevin in here at my channel we learned how to make the web and how to make it look good with weekly tips tricks and tutorials now a while back I came across an article on medium by Peter Jiang called modern CSS explained for dinosaurs really awesome article so I've linked to that down in the description below cuz it's what inspired me to make this video here today and even if you're watching this and even if that inspired me to make this I'd encourage you to go and check it out because it's really well done it's well written there's lots of cute pictures of dinosaurs which I sadly don't have in this video I love the articles so much I reached out to Peter and asked him if I could make a video based on what he talked about there and he said yes so this is what we're doing today so it's a heavy inspiration from his article but I've put in my own opinions into this as well and sort of fleshed out a few things that I thought were important so when I look at what floats are why we even use them ever for layouts and what we're actually supposed to be using them for we're going to see what flexbox came in and did to change the game a little bit and then we'll eventually get to grid and how the whole grid system and everything like that works and how it evolve we're sort of the evolution from one to the next along the way now one thing is I'm gonna be looking at floats I'm gonna be looking at flexbox and I'm gonna be looking at grid I'm not doing a tutorial on how these work I'm gonna be using them to create some things just to show up some fast stuff that they can do but I'm not going to be going okay and this is how this property and grid works I have in-depth tutorials on flexbox anger it already so if that's what you're interested in check the description down below where you will find more information on those or watch through this video and if there's things that sort of grab your interest then you can go and check out the links that might help you at on those now one thing I won't be talking about is table-based layouts even though that's where we were before floats just those bring back some really bad nightmares and stuff I remember those days if you don't be very happy that you don't yeah with that out of the way let's get started alright guys so before getting started into the nitty-gritty of this I just want to say that I am in code pen so the link to this is down in the description below and also I'm gonna be using sass a little bit for this but it's just to make it easier for me to have nested elements just so I didn't have to have different class names everywhere for everything it just makes it a little bit easier for me to stay a bit organized and have everything in one document even if you've never used sass or you've never even heard of sass it will still be easy for you to follow along so it shouldn't cause any issues um so we're gonna start with floats and we're gonna be looking at what floats are and then we'll get into more but first of all why do we have floats why do floats even exist and one other thing that I just want to say is I have put a whole bunch of CSS in here to start with it doesn't really matter it's just making certain things look good on the page right now it's nothing to do with the tutorial itself so here in my float intro is where we're gonna be starting which is right here where I just have a little bit of stuff so we can see here on the screen so why do we even have floats what we're floats created for and one thing that's important to know is they're never intended to be a layout tool they were created for one specific purpose and it was to wrap text around images so here in my float intro I have my image and say we do a float left on there then I get my text wrapping up around it like that and maybe would one a little margin on the right of say one M just to give us a bit of space on that I'm so just very quickly if you've never seen or used sass I can nest things in like this if you're writing regular CSS you can not do this if I come and look at the compiled CSS of this what that's doing is where are we body section here it's creating a float intro space IMG so it's my image inside of the float intro there so I'm gonna be doing that a little bit along the way but it should be easy enough to follow along with so there we go this is what they were intended for so I can do that on the left or on the right and this was coming back to the days of print in the days of print having text wrap around images like this was quite common so they wanted to bring that possibility into the the world of web and what they came up with was floats now with floats you can have multiple items floating and they've just pretty much mean one will go one after the other so here in my multiple floats each one of these boxes let's just go look here in my markup I'm just as a class afloat on it so if I do a float left on that they'll all just go one next to each other and if there's enough room if there's not enough room they stack on top of each other like that so we can have multiple things floating and then if we had text here would just sort of fill in to the empty space that was there some clever people soon realized that because you could float anything you wanted you we weren't limited to floating just images like what was originally intended because we could float anything we wanted in doing so we could start to make some layouts and when your alternative to building a layout is tables like had been normal practice you take it even if it's a flawed solution so before we get into the real the downsides of everything here let's just come in look at my float layout one so I have a background on this so in here I just have a column column in column so if I look at each one of those columns first I'm gonna give them a width so the part of it was having to give things widths to make them smaller and then there's enough room for everything but because these are display block they can't go next to each other so then I could do a float left on them and look they're gonna work but that might just happen in my background and so this is the type of flaw that could come up so that's to me a really big flaw um and we'd have to use things like clears to get around that and they actually had to come up with sort of a hacky thing and this whole thing to begin with is kind of hacky margin right okay two or three percent we could get away with just to spread those out a bit um so you know it is hockey in general to be floating things to be making columns like this but it worked so we did it and then we had this issue so to fix that we use something called a clear fix so it would be dot a lot of the time you see CF for clear fix or just clear or clear fix and then we could come in here and say that the clear fix is a display table is usually what you'd find or it's not even clear fix and B this after display I haven't done one and so long I forgot it had to be the after display table content we needed to have and then a clear both on there and then you'd come and add this on to anything you needed and it would always be added to the parent so effectively what this is doing is it's adding a pseudo element after so after all the content that would be in here I want to add a pseudo element so it'll be inside my green box but after all of this and it's gonna create a clear which is gonna make and fix this whole background issue so let's go and do that flute layout one clear fix that will refresh the whole page so I just have to scroll down and you can see that fixes the issue right there there's other solutions to that can also deal with that but that was that sort of became the standard for that I've seen use the most anyway now this was just a simple three column layout and with the clear fix we could come up with solutions for that and actually before we keep going let's add my clear fix right away to layout to because it's gonna give us the same type of issue so if we come and look at the layout too we could actually make complete layouts so here I have my whole thing set up so I have a slide bar sidebar left I have my main and I have my sidebar right so we look at this and I do a side bar left I could say this as a width let's say 25% and a float left and there we go it gives room for this that you get the sort of weird stuff going on so then I'd have to go to my and what you'd try and do sometimes is something like sidebar right with 25% float right and then well well that's weird right and it's because this part isn't floating and even though I want this to go up here I need this to give it room to be able to fit so that's kind of awkward so then I'd have to come on my main and do a width of 50% and a float left on it so things could actually come up and it won't wrap underneath but then look at my footer my footer is really bad so then I'd have to come on to my footer and on my footer I'd have to do a clear:both and then I get this annoying issue of look at that my sidebars are longer than my maining area here so I get this white space there's ways of getting around that and there's different things you could do but um you know it we just had issues overall there was lots of problems with creating float based layouts since that's not what they are intended for so we constantly had to use little hacks and fixes and things to try and fix the problems that were coming up even though they weren't technically problems it was just us breaking things to begin with and not using things as they were intended and one last thing and that was the most infuriating thing I ever ran into when using floats um was here on my lathe 3 these are all little cards and you can see this one has a different picture on it and watch this these are all just dot card I'm into a float:left and something really weird is gonna happen and they're all lining up next to each other but this area here is empty these I expect they used to be tucked in to this space but they're not the reason for this is this picture is one pixel taller than these other pictures and because it's one pixel taller that means it's this whole box is one pixel longer you mean it's in perceivable but it's one pixel taller which means this can wrap into this space so this is actually the fourth card and then it's number five and six falling over here to make it more obvious what's going on I'll make this one a lot bigger let's just get a height of like 301 and this is on splash I got a lot of questions about it you can't normally do this with pictures but the on splash it image placeholders this is the width and the height if ever you want to use them and so now you can see that there is like this space here that this can tuck into so because that space is there this image doesn't go here because it's gonna go it's because of the way the whole float thing works anyway um it's trying to go after this one so after this one well it can sneak into this area here so it's gonna go there then the next one can't fit next to it so it wraps down onto here and then we start getting a normal flow again really really really infuriating um you actually had to make like a you know a row and then a row and then a row and so if the amount of cards changed or something or the height of something changed it could cause some issues along the way especially if you wanted it to be like two then three then four at different screen sizes um it could be really really annoying and then of course you get the whole clear fix issue where these are sticking out at the bottom of my box as well which is really really annoying so this is where flexbox I'm just going to turn these floats off so we don't have to deal with it flexbox came in and started solving some of these issues flexbox was the first attempt in CSS to actually give us a tool to create layouts well not really layouts it's far from perfect but it fixes a lot of the issues that we had em it wasn't created to make the layouts it was created to make columns or rows that's really different from layouts layouts involve having rows and columns so that's we're gonna get there a little bit later but it was the first time we're like okay people want to make columns a lot let's make it so people can actually make columns pretty much more rows it fixes a lot of the issues that we had with that we don't have to be hacky anymore we can just create columns quite easily and so to start here what we're gonna do is we're going to look at using our flex for layout but with only three cards so it's exactly the same as above but they're all the same size but just to get a rough idea of how this help to fix things now one thing that was a little bit different with this um if I come and look at the markup we had to create something like a flex parent it didn't have to be called Flex parent I was using that I'm just using that for demo purposes right now but we needed something because flex doesn't work floats work by floating the children flex works because the children get turned into flex items by the parent um so on here I would come and do a display flex so this is going to turn the children into flex items and they're gonna fit next to each other right now these actually have a width on them but if I look at this and I'll just come into this one specifically and I do my card width of initial so it's gonna reset the width to what they originally were there's no you know I'll even put it to 100% just to show you even though the cards have a width of 100% on them here they're not getting changed they're actually fitting next to each other like this and just to show you if I turn this off and you can see they actually have a width of 100% on them but because they're flex children they're going to make columns and they're gonna fit next to each other like that so it's solved an issue that we had with dealing with widths and getting things to squeeze in and fit next to each other it made our lives much much easier for that so if we come and look at this one which is exactly the same as what we had before and I'm actually going to copy you nd here so we can see there are all at 100% so if I came onto this and I did display flex and they all squeeze in next to each other like that so they're all just sort of like jamming into the space now that might not be exactly what we want so let's actually come onto here and change these widths back to 33% I think I had them as 30% actually so we could have some margins on them and then on here I'm gonna go on do a flex rap of rap I want to tell it that these items should actually be wrapping down underneath and look at that they all line up they're actually this isn't causing any issues even though this one is one pixel taller there's no problem with the layout the layout is just working which is really really nice and and this is the case where this is actually dictating how big they should be now and you don't necessarily have to use a width there's other earth it should be like 40 forty-eight I guess or 47 there we go so we could use media queries to sort of switch things around and we could also instead of using width you'd probably be using flex we'd probably also want to be using a flex paces like that but I'm not gonna get into the nitty-gritty of the difference between those right now just to keep it simple will stick with width I'm so I could have a media query saying at one size it's 100 then at the next media query they switch over to 50 and then the next one they switch over to 30 and my layouts are gonna work and even this could become 20 and then I get more you know it could really be very flexible in how it works hence the name flex box the nice thing about this too is it is responsive so as my columns are changing size like it's going to adapt to the content and make things fit because it's squeezing things and just getting them to work so that's really really nice and handy and one last thing we could do also on this is switch the direction so flex direction direction to call them and they're gonna line up the other way so I'm making column I'm making rows now instead of columns again that could be really useful for our media query along the way at one point switching that was back and forth but again flexbox is making rows or columns it cannot make both at the same time so flexbox wins right now whoever floats for sure 100% flexbox is a hundred definitely if you have a choice between the two go flexbox browsers support these days has reached it's probably about 98% the last time I checked which is amazing do double check who's visiting your site I'm gonna talk more about that in another video as I said though but flexbox is a really awesome tool and a big improvement over floats but as I said it's not a true layout system it's made for I can to make it column here and I'm not really getting into the nitty-gritty there's lots of really cool things we can do we can easily Center vertically with flexbox there's other things that does wonderfully so it's a wonderful wonderful tool but wait and what about grid well grid is the newest layered option we have with CSS and it solves even more issues than flexbox does it allows us to work in two dimensions so flexbox is only for a row or only for a column and grid lets us play with both of them that means we can create layouts with a lot less markup it's really incredible I really you can skip having container divs and other things that for me it's been a game-changer and a lot of other people have been sharing the same sentiment remember this isn't a tutorial on how to use grid I have other videos on those and there's links to those down in the bottom I just want to show you the basics of how it can work so the first example we're gonna use these exact same cards and I want to show you how amazing this is and even lets us use less media queries I remember when I saw this type of thing used for the first time it blew my mind so my cards are set to a width of 100% right now and what I'm gonna do here is I'm going to set my grid parent you have a display I've grid and I said there you need less markup so if we come and look at my markup here I've made whoops that's the wrong one I have made a grid parent in this case for this demo but you could literally put display grid on your body if you're using it for your layout of your whole page you can do less with you don't need as much markup as we used to but in this case I have an equivalent amount of market and so when I do display grid nothing actually changes and that's because I need to set up my grid template columns and rows so for the moment I'm going to set up my columns I'm just gonna do one fr which is an awesome unit and I'll explain it a little bit a second um so look at that you can see that they've come and they've made a little grid system right here now these cards clearly have no space between them or anything like that so I could come in and say grid grid grid now Grip grid yeah one em and look there's a gap on the tops and bottom so I can make that three and it's gonna make them bigger or I can make it point five and it's gonna make it smaller and it's doing this way and it's doing that way and oh my goodness it's so so nice now here I'm repeating the same thing over and over again so what this is done is its created a column of 1fr when FR when FR which pretty much means take the it's one fraction so take a fraction of the empty space and our available space and that's the width of this one so I could come on this and say this one's too and it won't be double this up well it looks double the size sometimes it might not be exactly because it's using available space which is a bit different than just overall total space so I could do something like that and if I wanted to then I could take this one and make it a three um so that's pretty cool right and even with my grid template rows I could do one fr two fr and now this row is twice as tall as that one and so I think that's pretty cool so I can control the height of my rows and I can control the width of my columns really really easily I'm gonna take this row one off for the moment and revisit this because a lot of the time you might have something where they're all the same so one if R 1 if R 1 fr and if it's like that we can use the repeat so I'm going to repeat 3 comma 1 fr so it's exactly the same thing it's saying repeat 3 times when fr so I don't have to rewrite it each time and just to really do something fun and this is what blew my mind I'm gonna use the autofit keyword so auto fit so what auto fit does is it goes instead of saying repeat 3 times repeat 2 times repeat 6 times it's gonna repeat as many times as it needs to fit something and then there's the really cool min/max size that can only work with grid for the moment I'm hoping this gets expanded out to other things and just for this let's try like 200 pixels comma 1 it far and watch what's gonna happen here right now I have 4 2 by 2 and they have a minimum width now I have one by one when they're just stacking one on top of each other because what happened is right here I can fit this is 200 pixels and 200 pixels so there's room for those two to fit next to each other and be a width of 200 pixels each but if this gets smaller than that there's not enough room for it to be 200 pixels it jumps from its minimum size and it can allow it to get up to a maximum size of whatever the available space is so here and it's gonna keep moving because I have other content on my page but at one point there we go it's gonna break into three automatically and then I'm gonna keep going if I had room it would eventually get to four across and five across as the space becomes available for it so without any media queries he just creates something super easy and super wonderful like that it's really really really awesome to do stuff like that and then just as one last example for a actual layout like we looked at before here I'll come back to my let's go and look at the markup so this one I'm just gonna do a I don't have a grid parent so display grid right on there and on this one um let's do grid template columns one fr for fr and I wouldn't really be using F ours like this I'd probably be using min max to set things up and I start getting my layout but you can see it's really really broken but we can really easily fix this I can go and look at my title and I want this to have a grid column so I can tell it where they should fit on it I wanted to start a one and go to minus one so these are my line numbers so it's starting at line one which is the first line right here and I could actually count so I have one two three four does that make sense one two three four so if I put one over four it should look exactly the same so start at line one and end at line four but we can also work backwards so this is negative one negative two negative three negative four so if I do one over negative one it's just going to take that and make it stretch the whole way across so then I could do the same with my footer which is stuck on something like that I could say that my footer grid column of one over negative one and now it's going to stretch the whole way on the bottom you can see that that empty space issue we had before is solved flexbox would also solve this but we don't have any empty white space even though my columns are really narrow now there's a lot more to grid than this there's not just these negative one one things and if you're looking at this going that's kind of confusing as I mentioned I do have videos that go more in depth to it but we can actually give these line these numbers we can give them names we can use the development tools to see our grids and see the lines and see where things are lining up especially in Firefox which is by far the best one for the grid inspector I can make areas that look at all of that and I have tutorials on all of these and they just make layout grid is made layout something that's a lot more accessible and a lot easier to understand in my opinion there are some things to learn with it as far as you know this whole grid template columns in grid column and grid row and there's a lot of different properties to learn for it but you can start making simple layouts with it almost right away and the more you play with it the more awesome you'll see it is very very quickly so with all those options what should you be using today grid is sort of the layout tool that we it's made for layout it's the first one we have for layout so I'd encourage you to learn it and it is where things are going to be going flexbox isn't dead though a lot of people make fun of flexbox there's people who hate on flexbox a lot it works super well with grids so they're both definitely worth understanding and learning floats still have their purpose but we can actually go back to using them for their purpose which is really cool and fun now a big question comes up though and a really important question which is browser support grid is new it's awesome it does everything we hoped and dreamed that layouts and CSS could do but it doesn't have full browser support now that's a big topic of conversation and something else I have a bit of an opinion on basically because I read some stuff again so I've been inspired by others in this case and it's a really big subject so we're gonna save that for another video that'll be coming out next week so we're I'm gonna be talking about different options we have for browser support because there's not just one best way of handling it if you do want to be using grid for your layouts because we still have to deal with Internet Explorer and stuff now before I go I want to know what you think of flexbox and grid have you started using grid in production sites have you practice grid are you learning grid do you still do float based layouts if so why are you still using them is it because the clients need that they have some legacy browsers that they need to support or something else so I'd love to know where you're at in your your current journey what you've learned where you're going and and all that so please share down in the comments below before we go please consider subscribing to this channel it lets YouTube know that you like the stuff that I am producing so I'd really encourage it it helps other people know about it so hit that subscribe button if you do like content like this and there will be a video every single week that will just bring you some cool CSS HTML sometimes some JavaScript stuff so please do consider subscribing a big thank you to my patrons for making all of this possible you guys are amazing your support is one of the things that helps me keep going with this channel so thank you so much for that support if you'd be curious about learning more about patron there is a link down in the description below where you can find it more about that and and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 199,996

Rating: 4.9585195 out of 5

Keywords: Kevin Powell, tutorial, html, css, css floats, css flexbox, css grid, modern css, float flexbox grid for layout, which to use for layout, what to use for css layout, css layout, css layouts

Id: R7gqJkdc5dM

Length: 26min 59sec (1619 seconds)

Published: Wed May 23 2018

Reddit Comments

[u/Dean_Roddey]

And it still sucks :-) I say we just issue everyone a screen with the same AR and resolution and be done with it.