CSS Grid Course

heyyyyyy and welcome to this free course on the CSS grid layout module CSS grid is actually a whole new way of creating website layouts it'll give you more flexibility than any other layout system or framework and it's also pretty intuitive to learn before we jump into the course I want to point out that what you see in front of you now is not a normal video it's an interactive scrim but screencast and that means that you as the viewer at any given time can jump into the code and change it you can for example head over to the index dot CSS and change the color value for the h1 tag let's say black let's see how your changes affected the output in the simulator window here so feel free to do this whenever you feel the need for experimenting with the code so that you make sure that you properly understand what we're going through okay so why do you want to learn about CSS grid well first of all because it makes your life a whole lot easier when it comes to creating two-dimensional layouts which basically almost all websites come system secondly as you'll see it'll make your markup significantly simpler it'll also will give you a lot more flexibility when it comes to changing the layouts for example through responsiveness and it'll also enable you to actually skip frameworks like for example bootstrap and finally CSS grid is now supported by all the major browsers and the support amongst global website traffic is climbing quickly to learn exactly how many percent at the time you're watching this screencast check out this URL here now let's kick off the course by looking at the benefits CSS grid has over a framework like bootstrap here we have created two mock-ups for a website this one is done using the CSS grid and this one down here is done using bootstrap the layout contains a header a menu content and footer the mark-up is found in the examples dot HTML here you can see the HTML for the bootstrap example here we have the HTML for the grid example and we can instantly see that the CSS grid markup is significantly simpler than the bootstrap markup because God are all the unnecessary row items and the ugly class names so as I mentioned CSS grid will make your markup cleaner benefit which of course would become much more apparent if we were to turn these two examples into full-blown websites however this of course doesn't tell the whole story as the grid example of course needs CSS which you can see here in the examples dot CSS here is the CSS needed to create our grid example conceptually what's happening here is that instead of trying to define the layout which is the columns and the rows in the HTML we're rather defining everything in the CSS and this brings us to our next benefit which is that this separation gives you a lot more flexibility let's say that you for example want the menu here to pair up besides the header when it's being viewed on mobile to make this happen in our CSS grid example we simply create a media query and then we target the items which we want to change according to the new layout which is the header the menu and the content and then simply give these their new values and the result is that when we shrink the page and if you look at this CSS great example you can see that boom there the menu item jumped up to the top row the header moves all the way to the right and the content took up the entire second row we can change back boom like that now if we were to try this in bootstrap we'd quickly realize the downside of having the layout defined in the HTML because what you want to do here is to make this menu item jump up to the first row up here however that's not trivial because the menu item is already trapped in the second row down here and in order to move it up to the first row you actually have to change our markup you have to cut away this element down here and a stirring up here that's not something you can do based upon a simple media query in CSS you can of course do it in JavaScript but that's hacky and more complex so what you want to do instead is learn CSS grid and I'm gonna teach you that in this course so just sit tight and we'll start the next lecture right away Hey in this screencast you're going to learn how to create grids through defining its rows and columns Grint consists of two main elements there's the container which we have here and then there's the items which are the elements inside the container in our case six divs which display the numbers from 1 to 6 now without any grid layout this results in 6 divs stacked on top of each other I've also given them a little bit of styling but that is nothing to do with the grid layout itself to turn this container into a grid we're going to target it and give it this play um grid run the code now won't result in any layout change yet because we haven't defined how we want our grid to look like so by default it only has one column and thereby it looks like we've just stacked six lives on top of each other in order to specify the columns will give the container a grid template columns will define how many columns and how wide we want them to be let's set the first one to a hundred pixels the second one to auto and the third one 200 pixels as well auto in this case means that the column will take up whatever remaining space there is in the width let's also give the grid a couple of rows with template grows and let's give both of them a height of 50 pixels so in the grid template columns property you define the width of the columns and in the grid template rows you define the height of the rows and as you can see we have a nice little grid hair as expected it contains three columns going from top to bottom one two three and two rows going from left to right one two since the second column here is set to auto this grid is also responsive in order to make the grid look a little bit nicer I want to give it a grid gas property and set it to 3 pixels as you can see that gives a nice little gap between the items now let's say we don't want our grids to be three columns wide and two rows long rather two columns wide and three rolls long then we simply need to remove a column we can remove this last one here for example and add a row 200 pixels down here we run the code you can see that we have a completely different grid 2 columns 1 2 and 3 rows 1 2 3 the queue first rows are 50 pixels tall however the third one is 200 pixels and the grid is still responsive as the second column is set to auto so in the next screencast I'm going to show you a few more ways of setting these values inside the template columns and grid template rows but before we jump on to do that I would recommend you to jump into the cold hair and play around with the values so that you're 100% sure that you understand the relation between what's going on here in the CSS and how that plays out in the simulator over here so go ahead and do that and I'll see you in the next screencast hey there in this screencast I'm going to teach you a better and more powerful way of defining columns and rows as you can see we're now working in the index dot CSS file and not directly in the HTML file that's because doing it in the index dot CSS gives us the benefits of automatic updates in the browser window so we have this very simple grid here which you probably recognize from the previous cost it's got three columns the first one being a hundred pixels wide the second being auto and the third is set 200 pixels as well so this grid is responsive as the second column grows and shrinks with the width of the container we also have two rows which are fifty pixels each now the first thing we're going to do is change the responsiveness of the grid because let's say that we want all three columns to grow in size as the container grows in size we want them to be equal regardless of the width in order to achieve that I'm gonna teach you a new value which CSS grid brings with it it's called fraction unit and it's written like this one Fr let's set all three columns to be one fraction unit each run fr for the second one and for the third one and now as you can see they all grow and shrink equally so what happens here is that the grid splits the entire width into three fractions each of the columns take up one fraction unit so if we change the second one here to true fraction unikz you can see that it'll always be twice as wide as the first and third column because now the grid has split the entire width into four fraction units and the second one takes up two of those while the first and third column take up one each okay so let's go back to having each of the columns equally wide in this case we can actually write this in a simpler way we could do repeat times 1 fraction units as you can see gives the exact same result so the first parameter of the repeat function is the amount of rows or columns and the second one is the value just the height or the width of the rows or columns so let's say we want six columns instead then we can simply change this number here to six instead and as you can see now our six items fill up only one row as we have six columns and six items in this grid so let's go back to three we can also do the same with the rows of course it's 2 times 50 pixels finally I also want to show you a simpler way of defining the rows and columns because we can use the shorthand method for this so I'm going to copy the rows value here and remove that line and also remove the - columns I'm gonna paste in neat rows value or just lash and then let me column value I'm after that and that'll give the exact same result so grid template is the shorthand method for grid template columns and grid template rows and it can be a bit hard to remember which one of rows or columns goes first and which one goes last and the rule I use to remember this is to think of it as drawing an L you start at the top and go downwards across the rows and then you go to the right across the columns start with the rows and then the columns so in the next screencast you're going to learn how to adjust the size and position of the items in the grid so stay tuned and I'll see you there Hey in this screencast you're going to learn how to adjust the position and size of the items on the grid which is critical to know in order to create real-world websites with CSS grid we're going to create a mock-up for a website and here in the index.html you can see the mark-up for that as you can see we're targeting each of the items using a class name header menu content and footer to start with we have this 2x2 grid each of the columns are one fraction unit so they're responsive as you can see and each of the rows are 40 pixels tall for our website though we're going to need three rows as we want the header to take up the top row the menu in the content to being on the second row and the footer to be on the third row all the way at the bottom so let's create a third row here let's place it in between the two existing rows and give it a height of 200 pixels as you can see now the header and the menu is on the top row on the content and the footer in the second row and our third row is blank as we haven't filled it with content yet since our items only take up the first four grid cells so let's change that we'll start by targeting the header and making it span from the left hand side all the way over to the far right-hand side to achieve that we need to head into the dot header and give it a grid column art set that one and also give it a grid column and at 3 as you can see now the header spans across the entire first row and what we're saying here is that we want the header to start at the first column line and end at the 3rd column line and you might wonder why we have three column lines when we only have defined two columns well that's because the first column line goes from top to bottom on the left side of the grid the second column line is the one that separates the two columns and the third is the one that goes from top to bottom on the far right hand side of the grid so when you have two columns you have three column lines and you can write that like this alternatively though we can also use the shorthand method which I prefer let's remove this line here and also remove - start rather do one forward slash three as you can see that give us the exact same result let's also do the exact same thing with the footer but now the footer also spans across the entire width well critically we could have written this in a different way we could have done we could have done one /span - I don't give the exact same result what we're saying is that we want the footer to start at the first column line and span across two columns and finally there's also a third way which is to write minus one that'll target the very last column line now that we know that we want our footer and header to span all the way to the last column line we can do that with both of them and take the advantage of the fact that in the future we might not know how many columns we're going to have in this grid as we can change that however we want so this is a nice little trick when you don't know exactly how many columns the item will span across in the grid and to prove that point view I'm actually going to change the amount of columns we have in the grid right now because we don't want the menu here and the content to take up an equal amount of space in the width that doesn't make sense we want the menu to be a narrow sidebar on the left-hand side here and we want the content take up much more space and we could do this without adding more columns by simply doing one fr for fr for example now you can see that the content takes up much more space since the second column is for fraction units and the first column is only one fraction unit however this is not a very flexible way of doing it because now we're still stuck with two columns on a website layout and you normally want a lot more columns than that in order to have the flexibility to shuffle around and change the content so what I'm going to do instead is use repeats give it twelve columns each of one fraction units now the menu and the content take up one fraction unit each in other words one column each and they're actually forcing the columns to be as wide as they need in order to display their content or just the descriptions we've added inside the items in order to make this look nice again I'm gonna head into the content class and give it a grid column we know that it starts on the second column line two and we wanted to go all the way the final column line like that so we're gonna do minus one now we have a twelve column layouts instead of a two column layout meaning that we have much more flexibility if you want to shuffle around on stuff and notice that the footer and the header still spans across the entire width which is solely because we're using the minus one here if we had stuck with the three here and here that wouldn't work at all so let's change it back to minus one now let's also look at the grid row property as we're going to need that if we for example want the menu here to span all the way to the top in order to do that we first have to change the header though as we need to make the space here available this little grid cell here needs to be available for ravit mini so we'll change it to two now we have a blank cell here meaning that we can head into the menu class and give it a grid row and set back 1/3 meaning that it spans from the first row line to the third row line as you can see took up the spot here in the top left corner because this is the first row line this is the second and here is the third the fourth then is of course the the bottom line okay so before we jump onto the next screencast I would recommend you to for example try to make the menu span all the way to the bottom or alternatively make a pair on the right hand side instead of on the left hand side and then in the next screencast I'm going to show you a really cool way of defining layouts which gives you a lot of flexibility in terms of shuffling around on the content and experimenting so stay tuned and I'll see you there Hey in this screencast you're going to learn really cool feature of CSS grid called template areas which allows you to change an experiment with layouts much more easily than with the techniques you learned in the previous cost this feature is ideal for creating prototypes of the Alps quickly we're using more or less the same example from the previous screencast our grid has 12 columns and 3 rows the columns are just as they were in the previous screencast however for the rows I've changed the second one from 200 pixels to Ottawa that means it'll take up whatever available space there is left in the height and combining that with setting the height of the grid container itself to a hundred percent this will result in the grid being responsive in the height as well as you can see if we make it taller the second row grows with the grid now we're still using the grid column property to adjust the position and size of the items what we rather want to do in this screencast is used something called grid area and to be able to do that we're going to have to give the container grid template areas properly and the syntax you're about to see now might seem a bit weird it'll be a visual representation of the grid and the way it works is that we'll create a string for each of the rows and in those strings we'll create a cell for each of the columns so let's add letter H 12 times in the first string we have to give it exactly 12 characters it has to match the amount of columns so we're not actually defining the columns or rows here we've already done that up here we're just naming them so that we can refer them using these names later on in the second row Ladd 1m and elevenses I thought in the third row rad twelve F's what you have here is a visual representation of how we want our grid to look like unless you might have understood the age M C and F refer to header menu content and footer so now let's remove the old way of positioning the items like that and build up the grid over again we'll give the header a grid area of H as you can see as a result the header takes up the entire top row just ass we've defined here we'll give the menu grid area M content grid area C footer grid area of F as you can see our layout is just the way we want it to be and it's responsive now the reason this technique is brilliant for creating mock-ups is because now I want to make the menu span all the way to the top like we did in the previous screencast we can just replace this edge here with an M and as you can see automatically the menu popped up to the top if you want to make it span all the way to the bottom let's do the same thing here as well and just as easy as that we have changed layouts without having to fiddle around with the values in the item classes you can also use dots which will result in blank cells like that there there there now we have this weird experimental layout where all the corners are blank now one thing you need to be aware of is that the areas will only be valid they are rectangled try and manage this to an F so that the F footer goes like that and then up you can see it breaks the entire layout so you have to use rectangles as you understand this a super simple way of experimenting with the layout so I'd recommend you to play around with these values here so that you make sure that you properly understand it and once you've done that you have finished the first section of this course so congratulations you now know quite a lot about CNS Grid however there's still a lot of stuff to learn so in the next section I'm gonna teach you some more advanced stuff and we're gonna create even more responsive grids that'll be super cool so I'll see you there heyyyyyy and welcome to the second section in this CSS grid course in it you're going to learn more advanced concepts you've already learned about responsiveness but now we're going to take that to a new level so here we have the setup for a grid which you can see in the browser window as well it's got six columns and two rows and that's defined here and should be pretty basic to you by now both the columns and rows have a value of a hundred pixels in width and Heights so this grid is not responsive now as you can see but we know from previous costs we can turn it into responsive grid by doing 1fr instead now the columns will grow and shrink with the width of the container however you wouldn't necessarily always want your columns to be six like now they're very squeezed together and at this point they're suddenly very wide what you perhaps rather room to do is for example only have two in width when the example is being viewed on a mobile and six in width when it's viewed on a normal screen so let's make the amount of columns vary with the width of the container will first go back to having 100 pixels here instead and then rather than hard coding in six columns we're going to use something called auto it now what will happen is that it'll vary the amount of columns with the width of the grid as you can see it simply tries to fit as many columns as possible into the container and when it gets a hundred pixels extra space on the right hand side it'll boom add a new one so on a very narrow screen it'll only show a couple of columns however this doesn't give us the responsiveness ramones as the amount of hundred pixel columns rarely add up exactly to the width of the container then we get a situation like this here where we have quite a lot of space left on the right hand side though not enough to add a new column and that doesn't look nice now you might think that we could rather do auto fit 1fr however that'll only give us one column because auto fit tries to fill up the grid with as many columns as possible until there's not enough space to add a new column so when you use for action unit it starts by adding one column however then all with is used up immediately because at that point both the width of the entire container and the first column are set to one fraction unit so to get the behavior we want we're going to use something called min Max and we'll set our columns to be minimum or hundred pixels maximum one fraction unit now you'll see that the columns will always fit the entire grid regardless of whether or not the container exactly adds up to 100 pixels so what happens here is that the columns will always be at least 100 pixels but if there's more available space it'll simply distribute that equally across all the columns so now there are more or less hundred pixels if we make the page a little bit wider you can see that it stretches all of the columns so now the width of the container is something like 550 pixels or something however when it reaches 600 pixels there it uses the minimum size for the columns so that it can fit in six columns so it prefers to use the minimum however when it doesn't add up to exactly 500 or 600 pixels it uses one fraction unit instead so now we also get a nice view on mobile like that and a nice view on a very wide screen okay so in the next screencast I'm going to tell you about implicit rows so stay tuned and I'll see you there heyyyyyy in this screencast we're going to continue with grid from the previous one as it still has an issue we need to fix because if we make this grid narrow like this and have a look at the rows that are created beneath the two rows redefined we'll see that they're not acting the way we want them to they're not a hundred pixels in height which we define here they're only as tall as the content inside of them force them to be and that's because they are implicitly created because as you can see here we only explicitly created two rows however with our current defined behavior for the columns we are going to need somewhere to place these items which can't fit in our explicit grid up here so from five and onwards we need to create new rows automatically in order to display our items and as we haven't told our grid how we want to style rows that it has to add to the grid itself it just has to decide for itself how these rows are going to look so let's fix this because we can target these rows by simply doing grid Auto rows and set the value to a hundred pixels and now as you can see the just how we want them to be you can see that as well grows and shrinks nicely with all rows always being unheard pixels tall and now that we've defined this one we can actually get rid of this one like that now all rows will be created implicitly and they'll always be under pixels tall so in the next screencast we're going to tie all the concepts you've learned up until now together and create a super cool image grid so I'm looking forward to see you there hey and welcome to the final screencast of the second section here we're going to take what you've learned up until now and use it to create really cool image grid I've already created the setup we're using the technique for responsiveness which we talked about previously using autofit in combination with min/max which gives us a nice responsive grid that varies the amount of columns and the rows are implicitly created and are 75 pixels tall in the index.html you can see that I've added an image to each of the items in the grid that's of course the images you can see here and this is already I'd say a pretty cool grid however not all of these images fit the frame they're given equally well some of them might be more horizontal while other images might be more vertical I also have a few favorites which I think deserve a little bit of extra attention you can see they're actually given some of these item classes like vertical horizontal and big these are the images which I don't think fit well into only one grid cell so let's go ahead and make the horizontal images twice as wide head over to the CSS to the horizontal class and we'll set the grid column property now previously we'd do something like one that's the starting value and then example to span two so that they'd span across two columns however as you can see that'll force all the horizontal images which is this one this one for example to start in the first column line if we enlarge in the grid you'll see that they'll but they'll still stick to the first grid column line which amongst other things leaves open spaces in the grid to something we're going to talk about later on so what we rather want to do is swap out this one here with Auto now you can see they start on whatever column line they were given initially this one starts here and these two now happen to start on the first column line but if we change the way they could you can see that the horizontal images start on various grid lines just one what we actually also can do here is remove this entirely and just do grid column span too so the grid column and grid row properties can take a lot of different values and combinations and at this point this is the simplest we can do however I wanted to show you the various alternatives okay now let's do the same thing with the vertical images the ones we want to make taller than the rest of the images so here will use grid row and set back to span two as you can see this one and this one they're now taller than all the others now we've gotten a few blank cells throughout the grid and we're going to talk about that in a minute whoever it let's first make the big images once we want to highlight twice as tall and twice as wide as we in normal images grid column and two and grid row span now you can see this image here and this one here and this one here are really getting the attention they deserve but we need to fix these blank spots here because that doesn't look nice so why do these blank spots appear to understand that let's look at how the grid lays out each of the items starts up here in the top left corner lays out the first item 2nd 3rd 4th 5th and then it needs to continue on the next row which is here and it tries to fit in the 6th image however when it's about to lay out that one it can't fit it as it only has one grid cell available here however the sixth item is a big one it's this one here let's double check that in the HTML one two three four five six and that is indeed the big item so what it then does is that it continues on looking at the next cell that's already taken so it jumps onto the next cell again and here it actually has enough space to lay out the big item and then it simply continues laying out the next item here here and then one here leaving that spot here blank wouldn't be great if we somehow could fill these parts well we can and to do that we're going to use a property called grid Auto flow X by default set to row meaning that it'll lay out the items one row at a time just as we talked about starting here and going across the first row and then jumping next to the second row and continuing on like that however if we set it to dense blues so-called dense packing algorithm which attempts to fill the holes in the grid if there are holes in the grid and smaller items come up later then it'll move those up to fill the blank spaces so if we go back to row we see that this space is blank the next item in the grid which could potentially fit in here would be not this one the sixth item but the seventh item of the waterfall here so let's look at what happens when you change it to dense and indeed the waterfall image has now jumped back to this position and filled that hole and this works regardless of how wide the screen is as you can see we have a super cool image grid now which looks really hard to create actually however we've done it simply using these 20 lines of CSS and finally I want to mention that this dense feature here is an example of sorts order independence which is a huge win for CSS it means that the grid can arrange the items regardless of how they're laid out in the arc up here we simply use the mark-up for what it's supposed to use for markup for content and we're using the CSS for what it's supposed to be used for styling and we're not limited to whatever order we laid out the images initially so source order independence gives you a lot of flexibility so this marks the end of this section you now know quite a lot about building advanced CSS grid layouts however be sure to check out the bonus material if you're hungry to learn even more thank you heyyyyyy in this screencast you're going to learn a new way of positioning and sizing the items on the grid using something called named lines so we've defined our normal grid here which is the website layout you should be familiar with by now though in this case we're defining it in the very simple way of only having two columns one being one fraction unit and one being five fraction units so we're not using the flexible twelve column layout here as this set up makes it easier when you sing named lines so to brush up a little bit the grid has column lines and row lines and the first column line is the one on the left hand side second one is one separating in the two columns and the third one is the one on the far right hand side and our content item for example is defined to span from the second row line to the third row line from here to here in our code that will be from the line that goes in between here and until the line that goes here so what we now can do is we can add a square bracket in between and write confident start for example on the third line write confident and like that now what we can do is we can swap out the number two here with content start and the number three with Uncle end like that as you can see that works fine if we wanted to do the same thing for the header we'd have to give a name to the first line as well up here let's call that main start now the header spans from main start to content end however I actually want to call this line main end as well because there might be a case in the future where we're going to reference the main end explicitly not use content end as a proxy for it so so let's just add a new name here paint and like that just give it a space and then the new name now we can do main art mein and as you can see works perfectly fine the footer can get the exact same layout like that now let's also name the rows using the exact same convention will you main start I'm just going to copy them I'm going to start end and main end like that now you might wonder why we've been using this - syntax here and that's because they give you a little bit of magic now given that we've called this line here for content start and this line here for content end the grid knows that this is the content column or columns if that was the case so you can actually set the grid column to just content like that and as you can see it works now the header and the footer spans from main start to main and so we can do the exact same thing there as well just use grid column main and to take this even a step further actually we can also use grid area in one of these cases that'll be in the content case because let's have a look at the content lines both the row lines and the column lines so we know we have the content start here and the content and here though we also have a Content start here the second row line first second so this one here and we have a content end on the third row line the third one here meaning we have boxed in an area with content lines here here here here and here and now we can actually use grid area which you you might remember from section 1 of this course by simply doing grid area and set it to continent like that and it still works however you might be tempted to try and do the same thing down on the footer though that wouldn't work because it has to be boxed in by four main lines though the main start row line is the one that starts up here not down here above the footer so here we have only kind of boxed it partially in we have the main start column line here which is the start of the footer and the main end row line just the bottom of the footer and the main end column line which is the right hand side of the footer though the top of the footer is the content and line so we can't use grid area main here as you can see it breaks the entire layout so be careful and make sure that you have properly boxed in an area before you start using grid area okay now sit for this bonus screencast thank you Hey in this screencast I'm going to show you how to justify and align the entire content of a grid I've added here a black border around the grid container so that we can see its edges we've also made sure that the grid is fully responsive and that there's a little bit of space around it so right now our grid items only occupy a tiny part of the entire grid container and that's important in order to learn about the justifying and aligning the content so let's start with the justification which defines and distributes space between and around the items along the row axis from left to right so if we set justify content and set that to end as you can see that'll shuffle all the content over to the right-hand side to the end of that axis the row axis the default value here was start we also do Center like that now Center it along the row axis so let's combine this with a line content as well and do you think for example I'll push all the content down to the lower end of the grid because aligning controls the content along the column axis the vertical one which goes from top to bottom if we do Center hair as well will fully Center the items in the grid now let's comment out this one and and have a look at the other values you can use here as there's a couple of cool ones if we for example want a lot of space in between the items we can do space clean now we have a smart space as possible in between the items along the row axis you can also do space evenly like that which distributes the items evenly throughout the row axis so the items have an equal amount of space around them finally there's also the space round this one is pretty similar to space evenly though each of the items have a half size space on either end meaning that if you have two items besides each other that'll give a full size space between them though here in between the first column line and the first item you only have a half space as this item forces a half space on this side though the grid line itself doesn't force the grid to create any space for it though in between these two both of the items first the grid to add a half space in between them resulting resulting in full size space so that was the basics of justifying and aligning the content thank you Hey in this screencast I'll teach you how to justify and align the items on the grid so here we have our classic website layout it contains 12 columns in the width each are one fraction unit and three rows where the second one is auto so this grid is responsive in both width and height as you can see we have defined the width of each of the items using the grid column value so from the header for example we're saying start at the first column line which is this one and end at the last one which is this one over on the right hand side so it's kind of stretching from the start point to the end point and this axis here the row axis is the one you control with justification so if we do or if we do buy items that'll be by defaults that good stretch however if we for example want each of the items to rather Center itself as much as possible and not stretch all the way from the left-hand side to the right-hand side we can use center as you can see now each of the items are centered at as much as possible you can also use spart that'll squeeze all of them towards the left-hand side and end is the opposite of this that'll squeeze all the items to the right-hand side now let's comment out this a little bit and use the line items property that'll do the same thing though along the column axis so the vertical axis from top to bottom if we do Center here you can see that each of the items are now squeezed together towards the center though not only left to right row axis but on the top to bottom column axis we can do and that'll squeeze all them to the bottom or start that'll squeeze them towards the top now let's do the center again and combine this with center here now all the items just a tiny rectangle in the center of the grid cells which had originally occupied fulling now I have no idea why I would want to create a website layout like this it's really weird but that's besides the point of this screencast finally let's finally let's comment out these few get back to the original layout and look at how you can do the same thing though only targeting one of the items let's head into the content for example then you can use justify itself a new center now only the content is centered aligned office well and and now the content is squeezed down to this tiny little box in the bottom center of the huge space it originally occupied a little bit sad actually to see the content to see the content being turned into a shadow of itself like that so let's give it back its original space like that okay so that's it I hope you learned something and feel free to play around with this yourself thank you heyy in this screencast I'm going to explain the difference between autofit and autofit so here we have two different grids using one or the other you can see them on the page here and I'm assuming that you understand the basics of this complicated expression here we're basically repeating with autofit as many columns as we can fit into the grid given these constraints here they should be minimum 100 pixels and maximum one fraction unit that as you probably remember from the screencast in the second section will give a nice responsive behavior where the amount of columns grows with the size of the grid like this if we enlarge in this page boom there the grid crossed the 300 pixel threshold meaning it could fit three columns in instead of two and as we make it more wide the columns become one fraction unit until it reaches the next threshold which is 400 pixels and boom then autofit and autofit adds another column to the grid since we now can fit 400 pixel columns into the grid however there's a slight difference between the two and that'll be apparent if we try to enlarge the grid even more like this now what you can see and that autofill actually added fifth column even though we don't have a fifth element to add there where is auto fit made sure that the four items we have actually fit the grid now under the hood what's happening here is actually that both of them add new column tracks though auto fit actually collapses those new columns to see row pixels in width so that the current items you have in the grid when defined like this with a maximum size of one fraction unit actually will fit to the grid regardless where's autofill at every 100 threshold right there and there and there it'll add new column tracks which basically are empty so that was the difference between autofit and autofit in this example I will show you how we can use CSS grids to create an article layout so in this example I have a plain article that I've written I wrote it originally in markdown and then I generated this HTML using a markdown compiler so it's not so it's pretty nice it has you else it had Soapy's there's a div here for the code highlighting and a figure a figure tag for the image and just basic HTML and I'm just going to go straight ahead and turn this into grid and then I will explain what I'm trying to accomplish that so how it looks now we have a grid which is very funky move everything where I want it I'm gonna come to me and there we go so now I've defined the grid which has three columns there's the first column that's 80 pixels then there's a main column that takes one fraction of the space and then there's the right column that takes 80 pixels and I have this rule here which says that every element inside article should start at the grid column line number two so remember that the grade column line one goes down here two goes down here then we have three over here and four over there and by setting grid com2 we say that everyone should start in this column and we need to set the min width to zero to actually allow it to shrink if we don't set this you will see that it goes all the way over there oh right now this is just a way of adding some spaces on the side but since this is Grint we can now glue some things very easily since I now want this figure take the whole width and that was wrong and let's add some space on top of it right so what did we do here I set the grid column to start at line one and end at line -1 which is the last one so this is the way I was saying make the element take the whole width and this is just radically simple them and the other way to accomplish the same thing if you don't have a CSS grid you end up having to say that these elements here should have a margin and standard margin and this should not you know then cancel out the margin you set by default and often this is very tricky because you often end up having to have custom HTML just to handle where things should when there should be narrow and when it should be white and it's can be really tricky deciding where to put things so another thing that we can do is to add another element I'm going to call it aside and here I'm going to just write some text now we have this new paragraph over here and now I can style it now I want to style it like this I want to say in the third column I want to have a gray color smaller font size this seems like a good time to add spacing so yeah and if I wanted to be on the left side I think I said they look really calm two three one and trust me if you're trying to do this without a width it's it's so hacky I can't even begin to think like because you have this element here which originally has some margin and then maybe if you put both of these elements inside the same deal maybe you can do like position:absolute and set left a hundred percent or something yeah I don't know I don't really know this is just something I don't know a clean way of doing in plain CSS and especially not in a way where you can have no changes in the HTML basically now there is one thing you need to know and that is this is actually a separate grid so this is becoming a grid row that goes here and this is separate grid row and this has the consequence that you often end up with this spaces you might in this case want this space to be gone and then this text to go down further to the right side or the other but that's currently not possible with CSS quit that's just limitation that you can't really avoid and whether it's good or bad I don't really know in this case I don't think it's that bad because this paragraph belongs with this paragraph and here we have a header which starts a completely new section so it's not that big a problem but if we had like another paragraph over here it can be a bit confusing that you have these big spaces which isn't quite optimal but other than that I find that using CSS grid for this type of article out makes the the HTML much cleaner you can basically just take the output from a markdown parser and dump it straight in you don't need to do anything special to support either having things in the left column or the right column or in in full width and the styling itself it's 20 lines and even here I haven't touched anything like block quotes both here's the clothes maybe you also want that to be in the full width oh we should remove much another side that maybe we want to separate color once again and maybe like order left school solid thing as well and notice that i can just add padding and borders i just set the column to be from 1 to minus 1 and everything works i don't need to worry about negative margins or or knowing what the wind of this columnist so now if i want to start the left column 317 third or maybe 40 and the right come to be 40 that works perfectly fine and all is just very very good thanks Hey in this screencast I'm going to talk about the difference between flexbox and grid and I'm also going to show you how you can use the two together so we have a header here which is built using flexbox and a page layout which is built using CSS grid here is the HTML for the grid example and the HTML for the Flex box example and the CSS is located in the index dot CSS file here and we're going to look at this code in a minute however let's first look at the examples themselves cuz you might actually be able to guess the main difference between flexbox and grid just by looking at these two examples because flexbox is built for one dimensional layout like this one goes in one direction from left to right being just a single row whereas CSS grid is built for two-dimensional layouts like this page here it has three rows the top one the middle one and the bottom one that actually has 12 columns though we can only see two of them visually here due to how we've laid out the items so if you're going to create layout which has a direction either row or column then use flexbox it's great for lining content within that container and gives you a lot of flexibility however if we're going to create a more overall layout with both rows and columns then you should definitely use CSS grid as it'll give you much more flexibility and simpler markup than if you worked for example try to use flexbox to create two-dimensional layouts okay there's also another overall difference which is that flexbox take spaces in the content it's so called content first whereas grid its layout first it takes spaces in the layout now this might seem a little bit abstract so let's look into the cold as that'll make it a bit more clear so the flexbox header here is turning to a flexible box by simply giving it a display flex you don't have to do anything else we then let the content make most of the decisions of where they're going to be placed throughout the container for example you can see the third child here the logout element simply adds a margin to its left-hand side and thereby shoving itself all the way to the end the container now let's look at how we create our grid layout first of all we can't just simply give it a display grid and then start shoving content into the container no we also have to define either columns or rows or both as we're doing here we're giving it 12 columns each being a fraction unit wide and three rows and just by doing this you can understand that grid in your larger degree takes basis in the layout first you're constrained by the layout you define here whereas we could have added as many items in the width on this single row in our header here you now constrained with 12 columns in our grid example here and also we need to place the elements according to the layout for example this menu item here this one which you can see on the left hand side here we're not placing it here by giving it a margin on its right-hand side like we do on the logout we're taking bases in the layout and saying that we wanted to span from the first column line to the second column line and thereby it places itself how we want this layout first versus content first it's a bit abstract and it's not something you think about when you develop though it's nice to be aware of it so finally let's actually combine the two because that's what you want to do you want to combine CSS grid with a flexbox and then get the best of both worlds so now what we're going to do we're going to take this header here move it down into our H layout so let's head over to the HTML and take the three elements here copy them and add them here like that that's what we now we'll do is we'll turn the header here into a flexbox giving it a display on flex alex run this code as you can see we have the items laid out like this what we now can do we can use for example justify conflict do for example space evenly like that as you can see they change accordingly wherever let's do what we did in the flexbox layout target the third child logout button margin-left:auto as easy as that you've combined CSS grid with flexbox now this header here this item in the grid container is actually a Flex container itself which then again has three items within itself so I hope you learned something from this and that you'll start using grid and flex box together from now on thank you

Channel: freeCodeCamp.org

Views: 309,905

Rating: 4.9633718 out of 5

Keywords: css grid, css grid course, css grid tutorial, css grid layout, css, web development, css grid vs flexbox, learn css grid, css tutorial, responsive web design, css grid layout tutorial, resilient css, css3, what is css grid

Id: t6CBKf8K_Ac

Length: 62min 43sec (3763 seconds)

Published: Mon Mar 19 2018