CSS GRID With Flexbox | Beginner to Pro Tutorial

what is up everybody my name is Tyler Potts and welcome back to enough video in today's video we're gonna be focusing on CSS layouts and we're gonna be focusing specifically on flexbox and CSS grid and both of these here these two different or two exact same slightly different home layouts are both built with Flex and grid one of them is bill with flex and one of them is bill with grid and if you can tell which one is built with grids then you're a genius if not then good good don't worry you're not the only one okay all right so flex grid of a home coordinate flex grid because industry I'm gonna be teaching how to use grid and flex so as you can see this one here is actually the CSS grid flex and this one here is flexbox and you can tell this because here we have hello box 1 2 4 and 3 and here we have 1 2 3 4 so in CSS grid because it is a 2 dimensional layout system we can put our boxes in any position we want we can actually move them around individually so we could swap 1 & 4 around without changing the the mark-up the HTML we just changed the CSS and in flex box we can't actually do that to swap the box it's round we have to swap it around in the HTML itself to actually get it to swap and so let's talk about CSS quit first the CSS grid it's the most powerful layout system in CSS today it's 2-dimensional which means it can handle both columns and rows flexbox is only really one-dimensional you can either go with columns or with rows and I'll bet you're thinking here but you've done columns and rows in your in your CSS it yes that is because I have created these and not just one flexbox other one this is multiple so these this whole thing is one flexbox then there is a flexbox here and here so these are two sets so this is a column there's a column then inside this box we have two rows so this would be a row and necessary and that is how you're seeing this layout but in effects grid we can do that with just one container instead of having three containers so let me show you there they mark up here so for CSS grid as you can see this is my grids mark up right here and for flexbox actually cuz it's a lot bigger this section here is my Flex markup and you can see it's kind of it's it's a lot harder to reads the Flex stuff to understand what's going on in in grid you can kind of you know there's four boxes inside a grid layout and if we go over I've just placed an X in it if we go over to our SAS file so we have ignore the rest of this just look at this grid block here so in CSS grid we have to find a grid area by saying display grid we've then created some columns we don't not don't think about this too much right now we'll go over it properly once we get into the actual code so a grid template columns so we've set three columns which are equal to one fraction off the screen we then have grid rows which are two rows of one fractions we then set a grid gap so this is another amazing thing about CSS grid in Flex box add a gap we have to have padding and also margin on our box and our container in grid all we have to do is say grid gap to add grit gaps in between our elements and then padding if you want extra padding on the outside and here's the mark-up for the box so here we just say display flex because we're basically moving all the text in center of it so flex box is actually the best way to do that and we'll explain why soon and then just to set the columns so this is where we tell it to go into a certain position so we say grid column span across the first column to the second and then grid come here say from the first to the third which is actually down here so first here so this first blocks to the third line and this one here it's from the first line to the second line this was from a second line to the third and so forth and there's a reason I have made this inside off I reason I've done this inside of Firefox it's because we have this amazing inspector tool so as you can see here we can inspect the CSS grid can't really do much with the Flex you can't read so you can see what are the Flex items but you can't really see much more than that and if I bring this out a little there we go actually it defines the laetus we've got a free by two area here so free free columns to rows and that so if we can give it line names and extend lines infinitely so you can see the lines but this basically what we news no so we've got a box here which we set from 1 to 2 as you can see these markers show you perfectly then we have for second box which we set from 2 to 3 and then this box here is from 3 to 4 but we also then set from 1 to free of me in the road department and this is why it makes it two-dimensional oh yeah two dimensional because we go along and we also go down and same width here so we've set this from 1 all the way over to free and f12 to like the following boxes so let's close out so now let's say we want to move we white box free web box to its would see where child free is and we'll say instead let's say we want it grid 2 to free because we don't want it to span the whole way up you want it to be on the bottom row and we want it to be from 1 to 2 we don't need to change box 2 to say if we just remove that we'll see what happens so let's remove grid column and now if we refresh as you can see hello box 1 2 4 2 & 3 although our free hasn't spanned across which isn't correct so free should we go a so I said 1 2 2 this should be 1 2 free because we're going to the third line if you imagine this in line so you have the first line the second line and then the third line that's how grid works so we have just moved box free from this position over here but now let's say we do want box to to go from this section over to here so it covers box for let's let's do that so let's say from in grid column we want to say we want it to go from two to four we then want the fourth box to just have nothing so it defines itself so if we don't don't define any elements it will try and position itself as best it can for itself and now I actually can see we've got a completely different layout it goes one two three four but in a difference or hallway and this is all just from the same markup this markup hasn't been changed it's just there but now for example if we want to do the same with flexbox it'd be way too well it's not too complicated but it's nice easy as doing in grid but this isn't a grid versus flex tutorial the whole point of grid is to do these sort of awesome very masonary grid style layouts flex box is just designed to work one dimensionally and to send a stuff to a line items and to move items around inside of one area so it's not designed to do multiple grid areas it's designed to work really one way and we're going to Spacek aliy flex and grid why I've called it flex grid work really well together and I'm gonna show you why so we have content in here correct so we have this box and we want to Center it we could have done that inside so if we go to our grid here and we remove this flex item here as you can see these are now back at the top left we could now say justify self and we could say Center now if we refresh as you see the whole box is now centered and if we say aligned self we can also say Center and we move it to the center again we can do this inside of grid so we don't need to do this in here we could say justify items center and a line items Center I think it might be content actually no that's correct so actually Eve no we now don't have it defined inside our box it's now defined here so we can move the whole box and align it without having to add a width or anything so like all the content will still fit inside our columns and boxes but let's say we don't want to move the actual boxes we want to move the text inside the box well we can't really do our grid that's where we would then use flex and as you can see we define flex will justify the content and say it's Center there you go but let's say we want the text at the start would you say flex star and this is gonna move all the elements to the staff each of their own blocks and this is where both them together really work well so I'm gonna go in for these Flex stuff now quickly just to go over that and then we're gonna get into the actual code and I'm going to show you how to create your own layouts so in Flex as you can see here the way we've had done this layout is by going we've created a flex an overall flex element and then we've paid two columns so the two columns is this column here so box one two and four and the second column is box free now inside of column one we've defined st. called 2 which basically means we want it to flex over for two and I'll show you the CSS for this so in class you can see this is still 1 4 this is 1/3 this is 2/3 off the space available and now we create two rows inside of this column and as you can see this is one so box one and two are one row and box 4 is the second row and then inside there we have our boxes and now if we go to the CSS for this as you'll see this one is display flex justified content space between two make sure they're all evenly spaced or their space between them all and then padding 8 pixels and that is so we can add the padding on the outs side but and and also we then have to define padding on each box items are down here we have a margin of eight this gives it the actual spacing like what's in here although in here we can just define it with one element and not to okay so also so inside the Flex element we then have two coals the columns which are display flex and a flex flow is columns so they display in columns and as you can see here we have a 2 and a 1 value which are classes on side are columns and the 2 says flex to take up two times the amount of space f you think elseis and this one here says take one time steer mount so now this one is taken up one while it's taken up to 204 that makes free and this way it comes there so this is 2/3 and this is 1/3 so if we was to make this 2 or so and hit save as you can see the box is go 50/50 if I was to make this if I was to remove this and go there as you can see these boxes take up all the remaining space it can until it hits this set width of the text so let's add back in flex one it's safe and there we go back to how it was so yeah that is how flex works but now let's combine flex and CSS grid together so let's leave that there but let's remove this flex actual box we don't need it now there we go so now we've just got one box and let's create some more content inside each box here or maybe we'll do this but we're gonna remove the CSS so right up here I'm going to leave this block CSS I'm also going to leave the section that's not important actually now we've got these just four boxes sat here on their own just seeing how they would in normal market without any normal CSS in this the section so this whole container which the grid is in we've set a width of 400% and in a max width 8 3 8 2 so it doesn't spend the whole hundred-percent and then if we shrink this in down the container will then follow with the screen size so it doesn't break Eva so it is fully responsive to that spacing there it speaks of the headers of course because we we haven't cared for shrinking down the headers but no one's perfect anyway so now when we send the height of 100 vertical height and a wife turn that percentage base and missus I don't let's fix this let's go high no that won't make sense what if I said our chicken or a toilet Shh I should be able to slight no I didn't doesn't make sense doesn't miss a max height a 450 so that's all you need to know it's got this like 100% and is maximum for 450 pixels we then have the background which is equal to a dark gray a dead Abijah power 25 hmm now this isn't relevant that was only relevant when we had the upper boxes and most this isn't relevant now but I'm just showing you the default styling we have on here now so let's say we want to create a new layout so we want to we want to start moving this around so let's get our out of here let's get call our grid idiqs we've gave it an ID for section the idea of grid and to initialize a grid so we need to create a grid container so we have our container in markup called grid but now we need to just we need to set the display type so we're going to say display and we're set equal to grid and this is basically saying set ready to set our grid and as you can see they've now space themselves out now Ingrid we could do grid there's also inline grid so if you want to grid blocks sitting next to each other so I don't know we don't really have any I can't reshare that right now but like display block in like inline display:inline-block this is like inline grid so you can add if you might float two blocks next to each other it's more than cake you're more from capable of doing so and the other thing is let's now so in here we want it so the way grid is set up you create tracks or the you set up the actual layout inside our flex and to do so will say here template or grids template columns and this is how we set the columns so we're now going to say we want the first column to be a hundred and thirty pixels the second column to be fifty pixels and the next column to be what so we've got one 30 pixels 150 pixel will say one Fey pixels this isn't going to add up to 8 3 2 8 3 2 minus 1 4 a minus 130 leaves us with 572 so let's make this one 572 pixels and hit save now if we go over here actually you can see we've got the first box which is in the first section so let's open up our little side-by-side fury let's bring this up and let's turn on the overlay for the grid as you can see here so now you can see the grid lines bare so we have our first box here and in our second box which is 502 and then our third track which is the hello box so here we go so got track 1 2 & 3 here and we can do more of these we want to week say but if we said take 72 of this we could add 72 to the end of this and I don't know why you would but there you go that's that's a different now 72 1 Phi 572 well for you sorry so let's set that back up 5:17 oh yeah there we go back to that practice now and as you can see it's automatically realized that this cannot fit on each one of these tracks we've got wire Lemann in this block a second element in here and a third element here and then we've got box for it doesn't fear because they can't go to the right of it because we haven't defined that track but it knows which design the column so now it's automatically drops down onto the next row and that's why it sat on hello box for so after this we can actually do other things this we can actually set this as percentage based week say 25 percent 25 percent 25 percent and 25 percent now if we go back as you see each one if it is now a quarter off the box and we could change this so we could say this one is equal to 50 percent this one's equal to 20 then 10 10 and we hit safe again the same deal happens like it did before we've got 10 bucks 10 percent 10 percent 20 percent and then 50 percent but there's actually a better way to define sections less if you want an even space inside off your columns we can use a thing which is specific to grid called fractions and yes it's like the math it's like math we it splits up into certain fraction so if we say one fraction one fraction one fraction it's gonna split our grid up into free even fractions and if a box again if we have a track that doesn't fit it will fall onto the track below and create a different row as you can see here we have 1 4 so these are all evenly spaced tracks now so if we go in and have a look you can see box 1 is 2 7 7 . free free free box 2 is the same and box free is the same same but for box 4 and now on the same so we can move it like this enough away to write this which is a bit neater is we can write a function a CSS function called repeat and in here so we've got repeat now we set the size or how many columns we want so let's say we want a free column grid which are equal to one fraction each so now it's going to repeat that and as you can see it's the same results and now we have one fraction the second fraction and the third fraction equaling up to the free fraction so pretend this is math quickly see wisdom 3 over 4 so now we're saying each each grid column will have 1 out of 3 to be its fraction and that's how it works again less quickly going for fractions one more time so let's say we had free fraction scale but we want one fraction we want this one sake of two fraction and this one's take up one fraction and there you go so now you can see what's happening here so this is one fraction this takes up two fractions out of four or out of three or in this case four because this is equal to two and this one is taken side this one is taken up enough a fraction so now these are equal to between all three of these is equal to four fractions but again repeat is mine one of my favorite methods so repeat 1:03 one fractions or we need comma two there we go and save and there we go we've got box one two and three so now we've got the other way let's go into a bit more detail let's go on to the next section so we'll go say grid template roads and this is the same sort of thing so we're going to say each row is equal to 50 pixels who has 50 50 50 were quite three rows of 50 pixels now if we look at this as you can see we have the first row which in case all three blocks and in the second row which in K is the fourth block and then we have more rows but we can't actually use those rows yet because we have no content in them we can't really highlight them so if we look here this is art so actually saying that if you look at this it tells you what they're actually called so this is Row 1 column 1 this is Row 1 column 2 down here would be Row 2 column 1 and Row 2 column 2 and so forth so column 3 column free Row 3 and so forth so that is the really cool way of looking at Firefox has by far the best CSS grid fewer our inspector tool so I find that really useful so if you have a working grid and you get stuck Firefox is your your browser alright so now we've gone over how we could set up tracks right so we could also go here and we could say repeat to one fractions hit save and there we go now there's enough away to do our tracks we can now do Auto raise and I've just wrote that down there in safe in here so we could do saying called grid Auto rows and now with grid Auto rows we can specify the size of any auto-generated tracks so any tracks what I generated we can or rows which are automatically generated when there's more cells and more items this will create them for us and to do so we can basically for example say something such as one fraction so each row generated will create a new fraction so let's say we say our columns is only two or we'll say it's only one one fractions we go there there you go so now there's four evenly spaced one fraction columns although this is white does by default this is basically the default thing so we could set here a mimic and I believe this works in Auto roasted min what min max dose if you set the minimum and the maximum you want so we want to say we want a minimum of 250 pixels one of our rows but we also want it to be a maximum of one fraction so if we go here actually you can see it's breaking out of our grid because 250 breaks well out of fast 450 limited height and actually you could see this is what's happened it's created this one cut one column but for row thing automatically which is broken down here and this is what min max dis and we can set this to be a minimum of 150 but let's say auerbach our container now gets bigger so we'll say we'll remove the max height on this actually we'll set the max height to let's say what's 4 times 150 150 times 4 26 okay we'll set this to 750 now if I hit save as you can see the boxes and now one fraction it's more from 150 which we set to be the minimum but it's now 187 188 187 weird it's like FD R fear for one it's like one off I'm guessing they can't fill it exactly in that height because you can't split by four I'm guessing yeah you can't read to find 750 by four can you yeah no it doesn't work but actually could see that's what they've done so now it's C for one fraction or 150 pixels and again we could set something else a week say the maximum we want is 170 pixels so now as you can see it now doesn't reach the bottom of our container because even though it's Mac its minimum is 150 it's max it's only 170 and actually see they are all 170 max and again this is just some other things you can do inside off anything I'm not sure if min max works inside of like let's say columns let's set this back to free and we'll say min max inside of here and I'm not sure if they're to go well but let's say we want it to be 250 pixels the minimum width and one fraction for the maximum and here we go so we have 375 for their Eve note and the minimum is 250 so now let's say we want four rows let's see if that breaks it down a bit there so now actually see they're breaking out of the box again because there only 250 so that does work you can do it that way as well so in here you can set a minimum and the maximum which means as soon as you make it bigger so let's say our width here was a maximum width of 75 or a wit for 75% let's get rid of that and say 80% so now you can see it's almost there so as we move this as you can see the boxes change with it so although the minimum step states and also the maximum which is one fraction also changes with it which is really cool so that it's a what enough away we can use grid but now let's say let's say we actually want to set up some actual grid column blocks out like a masonry grid like we did earlier let's default all this back to how it was quickly so hey Jeff are you saying let's just remove this first row the height will set back to 450 and I think should be good again so there we go now we've got our four boxes again let's say we now want to say grid template columns and set this equal to a repeater which will say two fractions or sorry two rows all one fraction each as you can see this one two three and four which is cool but let's now say we want three of those which we had before so now we've got free so we've got box one two and three and then it's automatically generated the rows for us but let's set some row so we'll say grid or that's not grid grid template rows and we're going to say equal to enough for repeat which is also every free one fractions here safe and now we've got free one fractions but if I got four items but let's say we want to create saying like not usual so thank you don't normally see on the website saying a bit abstract so let's say we want box free let's give them some color so cheese shall we so we'll say box and we'll say here and and child and we'll set the first one oh I missed a semicolon or a colon and we'll say background which is equal to this green so the first one now has two green it's a copy this and paste it a couple of times four times be exact they say two and we'll set this equal to the yellow the third one will be equal to a blue which in this case will be what do we do we'll do 0 0 8 5 C a and this will be equal to 3 and then the fourth one will be equal to a why they're safe and there you go our box is now I've colored to make it easier to see but let's say we want box free to span all the width now we can define stuff on the box itself to make the elements change position and area where they actually sit so we can say here for this one we'll say grid column and we're gonna say the grid column we want it to be we want it to start so let's turn on this grid here we need to understand so we wanted to start line free where it is and finish at line 4 so a grid column will say star line free and finish at 4 and then let's say grid row so now we want to change the row and we want it to start a 1 and finish at 4 so as you can see here it starts at 1 and finish at 4 so let's say that 1 by 4 hits safe and if you go back actually see now box for has been moved to the right in between 3 and 4 and it goes from 1 to 4 on the right and as you can see box free has been moved from 3 to 4 and automatically pushed down underneath because that's where it next fits and that is how grid works it obviously if it senses saying doesn't fit there because enough a block is taking up its space it will move that block to care for it now let's say we won box free to go across - and down - so it actually takes up 4 squares in a cube sort of way now let's do that so that is block free so we'll say here grid column and we want it to start at 2 and finish at 4 so we're say sorry that's wrong we want side 2 and finish it free for the column so we'll start one and free and then grid row we want it to start - and finish a force and we hit save as you can see it takes up the they buy for these boxes now so this is how the 2-dimensional worked it can go it can go through rows and 4 through columns now let's say you want block 2 to go from here and here but we want to keep we want to keep this blue block here we can do that so let's go here and say grid column and we'll say we want it to be too too free we want to say then grid row and we want to say it's one two free hits save and you can't see it but if we have four over it as you can see it just go over for that it's because it's actually behind the blue element so let's change that up how can we make that not behind blue element Chris F Java can tree change it home C index 10 save there you go now it's on top so as you can see it's actually overlapping it so even though that box is still there box two is just overlapping it and this is all possible in CSS currencies as critters so powerful but now let's say we want to start manipulating stuff inside of our boxes now we don't really want to create enough a grid system inside for grid system but you can if it needs to be like that but for now let's say we just want to align the this text to the center we can do that so now inside of a box we can say here display flex and this is where flex box become so powerful when it's mixed inside of a grid we could say justify content Center and the line items Center so like it did earlier there you go now I think a center although this one is cut off so let's fix that so we're inside off the third box we want to say justify self I don't know Cisco work and we're gonna say flex star it's safe and that's done the whole thing because that is what there does in grid so how about instead we set these specifically actually we can we could say justify content sorry and we'll say flex star and if we hit save there you go that fixes of there so we can utilize justify content and overwrite this because it's obviously cascading so this is how style sheets works this is lower than this and now we've said that to the star fit because it was getting overlapped here let's say we want box force text to be at the top so we can go to box for now just say a line items and we'll say flex start here safe and there you go pits now at the top so now we've got box free on the left box for at the top and by for these dead center off each other so again you could do so many different layouts with this let's let's say we don't want we want some gap in between our boxes so let's go up here inside of our grid and we'll say grid gap and what this does you can add it you just column so let's start with this let's say we want 10 pixels on the columns as you can see it's added 10 pixel spacing between each column anything that spans across two columns will be just stretched a bit more width where for content is there so this atom extra 10 columns in between because we it goes from line to line and not just what the adding gap won't split now let's say we want a grid row gap we're gonna say we want this of 15 pixels and let's actually make this one 15 pixels if you hit save as you can see that's now a row gap - and again it won't split anything that spans across multiple cells but now we don't really want to write grid common regard which one all right one thing so we can say grid gap and this will affect the rows and the columns at the same time now let's say once make this 25 pixels Lenny gate that worked it works just the same as how doing it separately this is just a shorthand way to do it oh okay so let's let's remove this from being multiple rows we don't really want it to be multiple rows there you go - nice backups there and let's say grid free we just we don't want to be marble rosy but we just want to span across - there you go that's there now these can be empty that's not an issue you don't have to fill every block but let's actually let's move - let's move this now let's say grid row and we'll say 1 2 4 does you want to go all the way across it's kind of broke against we haven't defined a row on number 3 so in this eyes it doesn't want miss to overlapped because this isn't God defined position and so instead it's gonna push it to the bottom because the only thing we have to find it's the column so it's spanning the columns it's supposed to but not the rows it's supposed to and now here let's say grid rows and we'll say 2 2 free just so it's it now pushed it back up there and there we go and let's bring it on top let's say let's remove the C index from that and let's add it to this it's safe and there we go but now once again this has lost its its text let's align it to the flex start and hit safe and there we go plus know what's there this is spanning across too and this is going underneath it kind of like train tracks if in a way and that's why they're called tracks because these tracks run along this way these tracks run along this way they can cross each other's paths it doesn't matter how it worked it doesn't matter how or when they cross they just can cross and there's a lot more powerful things you can do in grids and one place you can find this stuff is on CSS trick so this is just the basics so we've got the Flex box down and all that but now let's say you want to take it further anything you guys want to take further we can go straight to this grid so CSS tricks have this amazing complete guide to CSS grid and if we scroll down you can see here has f'ing so it has to discuss the grid container so properties for parents and for the children's a grid items so it tells you about column they do track stuff so how you move from from different tracks and different positions and it also tells you how you can do modify stuff with the container and how it all works as you can see here oh yes that's when I miss out auto so if you want something to take up the remaining width you just add a auto fields to it and that will take up the remaining width it has available and look this shows you many different ways you can do what I've done but just in different ways so CSS grid is so powerful and this CSS tricks guide is absolutely amazing and teach you pretty much everything q1 tonight let's remove that and let's close that so guys I'm gonna end this video here it was just a basics into CSS grids and flexbox I hope you have learnt enough to go and create your own crazy layouts and I want to see some crazy layout so your portfolio pages your let's say you have a bunch of projects and you want to lay them out in a weird way so you've got like a mobile app so you're gonna lay it out too high then let's say you've got a desktop apps you go lay it across four blocks and then you've got just a little a little website which is cool but it's not one if you favor it so you make it a small block so it's not it doesn't stand out as much but your best ones do you featured one stand out you can do all that sort of thing and I want to see what you guys do with that so without further ado guys thank you for watching this video I hope you enjoyed leave a thumbs up if you learned sink new leave a thumbs up if you enjoyed the video and leave enough of thumbs up three thumbs up guides I want to see these in the comments if you can't smack that like patty three times on yeah that makes sense to smash that like furnace much you can then also if you want to see more hit that subscribe button it costs nothing here in that subscribe burn motivates me to do more videos and also you know means my popup on your feed a bit more that's never a normally a bad thing right maybe someday too yes but we'll see and also the notification Bell means you'll know as soon as I put a new video up so if you want to know and you want to be here first you want to get ordered to do good information quickly then just hit that notification bell for that guys thank you for watching don't forget to join our discord surf if you want to drop your feedback in the comments below and I'll see you in the next video thanks for watching everybody and peace out always do it on my own so I gotta get through it and the only thing I know is to love what I'm doing never give up never slow till a fan early never listen to the nose I just wanna keep moving keep my head up when I hacked head up that's a fact never looking back gotta keep myself on track keep my head up staying strong always moving on I don't

Channel: Tyler Potts

Views: 54,844

Keywords: SASS, SCSS, CSS, HTML, Tutorial, JavaScript, Vue, React, how to, code, website, app, application, framework, animations

Id: 9zA8cB-54SA

Length: 39min 58sec (2398 seconds)

Published: Fri May 03 2019