CSS Grid Tutorial: Responsive Design Examples

hey welcome back in this video we're going to learn about css grid but because this is a long video right away i want to give you an overview of the grid examples we're going to cover so first we'll set up an equal width three column layout and we'll see how easy it is to have one item sort of span the height of two rows next we'll see how easy it is to center a piece of content both vertically and horizontally after that we'll see how you don't need perhaps an extra wrapper div to have a full width background color but then a fixed width interior area for just the content after that we'll learn how to overlap one piece of content on another piece using css grid after that we'll learn about an alternative way of placing and sizing the items in our grid and we'll create sort of this traditional header sidebar main area footer layout after that we'll learn about responsive design in grid and you can actually do a lot without even using media query breakpoints so you can see here i fit five items per row but if i resize my browser window it goes down to four items per row three if i zoom in a little bit you get the idea and then in our final example we'll code this area using css grid okay so that's what we're going to cover but before we jump into the action this video is sponsored by me i have several premium web development courses on topics ranging from wordpress to react js to backend development with node and more now udemy the platform where i host my courses they only let instructors create best possible price coupons that last five days and i can't update every single youtube video description on my channel every five days with a new coupon however it's a lot easier for me to update just this one single page on my website in the description for this video the first two links will be codepen links so a follow along link in a finished product link but then the third link will be to my course coupon page all right now let's learn about css grid [Music] okay so to explain what i mean by easy math or no math let's give ourselves a goal so each one of these paragraphs sits in its own div there are six of them let's look at the html structure they all sit inside an overall parent div and then there are six items so imagine if we wanted a three column layout so there'd be three columns and then it would drop down to a second row and then there'd be another three columns now back in the 1990s we would have used an html table to accomplish that and then for a long long time we would have used floats to accomplish that for the last half a decade or so we would have used flexbox to accomplish that but now we finally have a tool that is perfectly suited for the job at hand and that's css grid so watch how easy this is all we need to do go into our css so this is the parent element we just say display grid and then another property grid template columns and now first let me write a little bit of code that will look familiar to you if you're used to floats or flexbox but then we'll circle back and see how we can write even better code but if we wanted three columns you could maybe just say 33 percent and just spell it out three times so however many values you include here that's how many columns you'll have and just like always there's a hundred percent available width to work with so i just did the basic math and said each one should take up about 33 percent so if i save and refresh cool we already have a three column layout but now what if we wanted space or gutters or a gap in between the columns well we can just add another property called column gap and set it to 20 pixels cool so we have good news and bad news the good news is that that created precisely 20 pixel gaps however now i have an awkward horizontal scroll bar this is because if each column is 33 that's already taking up 99 of the available horizontal space so on top of that 99 of space we've already taken up then to fit in two 20 pixel gaps well that's more than the available space so how do we work around this well it's quite simple this is what i meant when i said easy math or no math at all so check this out instead of 33 and us having to do that math what if we just say 1fr 1fr 1fr fr stands for fraction it's a new unit of measurement in css and it's a really handy way of dividing up the available space so if we set all three to one fr they're all perfectly equal width but now the browser is doing the math for us so the browser is still going to give us this perfect 20 pixel gap that we set and then of the remaining available space after taking those into account it's going to divide that space up evenly now to show you how intuitive the fr unit is what if we wanted this first column to be twice as wide as the other columns you could just change this first value to 2fr instead of 1fr you get the idea let me put that back to just three equal columns okay next what if we wanted a 20 pixel vertical gap in between the items well in addition to column gap you can say row gap 20 pixels but if you want to use the same horizontal and vertical value you can sort of combine these two properties into simply just gap 20 pixels and that gets the job done cool so we now have a perfect three column grid equal width with precise pixel value gaps and we didn't have to perform any math on our own before we move on to the next example though i do want to show you the real power of grid compared to something like flexbox for example so flexbox is all about one dimension flexibly fitting a bunch of items on a single line now yes flexbox you can tell it to use flex wrap with the value of wrap and it will wrap down to additional rows but sort of flexbox whole philosophy and way of looking at the world is still designed around just that one long dimension and the fact that it drops down to a second row is almost an afterthought whereas with css grid it's built from the ground up to handle two dimensions right columns and rows so what i'm getting at here is what if instead of six items i only wanted to have five so let me delete one of these divs okay and now but what if i wanted this very first item to take up the height of two rows and maybe use a slightly larger font well watch out easy this is with css grid back in my css maybe i'll create a new selector that selects just the first item so i'll say item colon nth child just select the very first one and let's bump up the font size a little bit just so it's obvious which one we're working with okay so now imagine we want this div to span two rows we can just give it another property of grid row and now by default when the browser sort of auto places each item into the grid each item is only going to take up sort of one cell right if you think of our grid as a table and each one is a cell by default each item just occupies sort of a one by one square however we can tell it to take up more space so in terms of rows grid row we can say span 2. so span 1 is sort of the default or implied value but we're telling it to span 2 and now if we refresh perfect and just a small detail but what if i wanted this content to be vertically centered within this div well when i first learned about css grid my first instinct would be to try the property called align self and set that to center however you'll notice that even the gray background color of that div you'll notice that sort of the div as a whole is vertically centered and that's probably not what we want we just want the content inside it to be vertically centered so instead what we can do get rid of that align self we can tell this div itself to use grid and then tell it to vertically center its content so you could just say align content center try that out cool now that inner content is vertically centered don't worry i don't expect you to memorize these properties like align content in my opinion all of the align and justify properties these are always the hardest to memorize right away so don't worry we're going to see these several more times throughout the video anyways let's move on to the next example [Music] this is going to be the shortest example in the video by far but i just want to let you know that you can mix and match your values and what i mean by that is so we have the three column layout right one fr three times but i don't want you to feel like if you use fr you have to use that for all of the values so check this out what if i want the first column to be exactly 300 pixels wide and then i want the other two columns to sort of share the leftover available space well you can write code just like this mixing pixels and fr so if we test this out well that's not the best example let me increase this to maybe 500 pixels cool now we'll talk about responsive or mobile first design later in the video but for now you can see that this is already a pretty cool technique to have in our toolbox maybe there's certain content that you really need to be a precise pixel value but then you want an easy way to divvy up any of the remaining space and instead of pixels you could also mix and match fr with percentages so you could say this should take up 60 percent of the space and then any of the leftover space can use the fraction unit cool so big picture don't be afraid to mix and match your units of measurement when you're spelling out your templates [Music] okay for this next example let's move on to this purple div and really here i just want to let you know that you don't always need to use 100 grid focused properties what i mean by this is when you use grid you don't need to do everything the quote grid way so if you want to you can still set a max width value on a div and then use margin to center that div in the next example we'll learn how to do that the css grid way but in this example i want to let you know that just like in flexbox if you want to center a piece of content in a container both horizontally and vertically so imagine this purple div has a paragraph or heading with hello what if we want hello to be centered vertically and horizontally well it's just two lines of code so check this out in my css the overall purple div is example banner so it has a maximum width it has a specific height value and then i've used margin auto to center it but in terms of centering that little piece of content called center me inside it if we just tell the parent to use display grid and then on the actual child the headline or the paragraph if you just say margin auto that'll be used for both vertical and horizontal and just those two lines of code perfectly center the piece of content you may have seen that exact same trick used in flexbox while it's still available here in grid [Music] in our next example let's focus on this div i want to show you how css grid can save us from needing an extra or unnecessary wrapper div in our markup so in modern web design it's very common that we need an area to have a full 100 width in terms of its background color or background image but we don't want its actual text or content to use all of the available width instead we want the inner content to maybe only take up 900 pixels and be centered now traditionally before css grid the way that i would handle this so we're looking at this div now is i would give the background color to the outer div and then i would just wrap another inner div inside that and then i would center that div however with css grid we don't need that extra inner wrapper div instead we can just do this so here's that full width example right with the background color so i can just tell that to use display grid and then another property of grid template columns and let's just have one column with a value of 900 pixels so if we test that out that limits the inner content to 900 pixels ignore the measure tool on the screen right now it's claiming 730 or 40 pixels because i'm zoomed out in chrome but we've limited the width now we just want to horizontally center that so we can just give our container a property of justify content and set it to center so if we give that a try perfect let's not forget about responsive or mobile first design though so if we resize our browser on a smaller screen we don't want this awkward horizontal scrolling so we don't want to just set it to a mandatory 900 pixels we really want to set it to a maximum value of 900 pixels so what you can do here is use a function called min max parentheses inside there you give it two values so the first is your minimum value let's just give it a value of auto so we're really not defining a specific width at all just let it flow and fill the browser and then the maximum width we want it to be that would be 900 pixels so now if we refresh that is flexible and that will make sense from a responsive or mobile-first perspective [Music] in this next example we're going to focus on this area with the photograph and then this div with text so this div has a transparent background color and you could imagine that we would want to place that or overlap that on top of the image so maybe right here or maybe somewhere at the top now traditionally you would have used absolute positioning to accomplish that and there's nothing wrong with that approach i just want to show you how we could also use css grid to accomplish overlapping and actually before we get to the detail of overlapping this whole example is the perfect exercise to learn about manually placing items in a grid so check this out let's go find this in our html in css so here it is it's an overall area or div called photo example inside there there's just an image and then there's also a div this is sort of the caption or overlay text div and that's it so to learn more about how grid truly works and to learn how to manually place items and what that even means i'm gonna go write a little bit of code for this photo example div so in my css i'll tell that to use display grid and now if all we were truly trying to accomplish is just overlap the caption div either here or here we don't need very many columns or rows we would only need one column and one row but just for educational purposes just for this moment let's spell out multiple columns and rows so grid template columns and just for an example imagine i want four equal width columns and for rows let's say grid template rows and let's imagine i want to spell out custom sizing for the first three rows so maybe the first row should be 100 pixels tall the second row should be 170 pixels and the third row should be 60 pixels okay now as soon as i save that and refresh just looking at this alone might be super confusing and this might not be very helpful however our browser's dev tools can really give us a clear idea of what's going on as of today both firefox and chrome have great grid visualization support so check this out if you just right click and choose inspect to open up your dev tools so here it is and then if i click on the overall grid parent div so the photo example div notice this little grid oval here if i click on that where it says grid now it's really showing us exactly how the grid works right we have four equal width columns and we spelled out three rows right 100 pixels 170 and 60. now as we can see the browser has no problem automatically placing your content in each available cell it's just adding them in the order that they are in the html and by default each item takes up one sort of one by one square now we already saw in the first example how you can tell an item to span multiple columns or rows right so for example if we wanted this text box to take up two columns well we can just find the overlay text div and i could simply say grid column and give it a value of span two so if we refresh and i re-enable the grid visualization you get the idea so that's how you can control sort of the size of an item but what about the placement of an item so what if instead we wanted our text box to fill up these two cells well let me show you what we can do instead of grid column span two we can instead say grid column three slash five now don't worry i realize this is not intuitive i'll explain how this works in just a moment but if i test this out and refresh let me re-enable the grid cool let's explain what's going on so for grid column we used a value of three slash five what does that mean the first value of three might seem intuitive you might think oh well that means we want to start in the third column however these numbers in this context are not related to columns they're related to lines so in the browser's grid visualization labels you can see that we only had four columns but this line here is called line number five so the way this works is you say the first line you want to begin with and then a slash and then the line you want to go to in other words there is no fifth column we only have four columns so we're saying go to the fifth line you can also refer to lines by a negative number so instead of one two three four five you can see down here you can sort of count backwards and the last line is just referred to as negative one negative two negative three so on and so forth so for a quick exercise let's try to place the text box on this middle row and have it span the entire width here's what i would do for grid column let's change the first value to one so start with the first line and span or end all the way at the very last line so you could say five or you could just say negative one and then to go on the second row we could just say grid row and if we look in the browser so we would want to start on this line number two and just take up one cell so you can say two slash three or you could say two span one or you can just say two because by default it's just going to take up one so if we give that a save and refresh cool if we wanted this text area to fill up this bottom row well right now we're essentially already saying two slash three right because the default is to just take up one but that bottom line is called line number four so we could just say two slash four and now it's going to span sort of two vertical cells so from line two to line four okay at this point let's get back to the true point of this example which is how to overlap content now you might think oh well this is already overlapping the image a little bit not really this is really only happening because the image at this full width takes up a little bit more height than the 100 pixels i set when we're talking about overlapping we mean how can you have two items in a grid that sort of occupy the same cell so what if we wanted the gray text box to use this cell that the image is in well let's just try to manually place the text box onto that first row so we can say grid row just start on the first line okay and that does move the text box up to that spot but the image was sort of kicked out of its spot this is because the browser is very good at automatically placing items in the grid if we want to create overlapping we have to be super specific we have to tell both elements the column and the row that we want them to be in otherwise the browser will get creative and automatically place them for us to avoid overlapping so for example let's go tell the image to sit exactly in this first cell so for this selector the image if i say grid column start on the first line even just that won't get the job done that's telling the image yes to sit on this first line but we need to also specify a row so as soon as i say grid row should be on the first line right now we've specified sort of the x and y axis for both elements now we finally get overlapping now this isn't the actual layout we want we want the image to use the full available space and then maybe just the text to sort of overlap at the top or the bottom so now that we know how to manually place items we don't actually need four columns and three rows so here's what i would do on the container element for grid template columns we don't need four columns let's just have one column and actually if we just have one column that's the normal auto width we don't need this property at all and we also don't need the template rows property so all we need is display grid on the parent element now the image is already using what i want we're saying start on the first line for the column and the row let's just do that for the text as well start on line number one for the column start on line number one for the row so in other words both the image and text they're taking up the same x and y coordinate in the grid if we save that and reload cool so we just have sort of one implied column and one row and they're both taking up the same space now if we wanted the text overlay to sort of sit at the bottom we can just use an align property so on this overlay text element i would just say align self and set it to end cool and that's exactly what we want instead of end there's also a value of start so that would be up at the top and then as you might have guessed there's a value of center now if you're anything like me sometimes it's hard to remember if you're looking for a line self or justify self the way that i remember it is if you think of like a word processing program it lets you choose if you want text align left right center or justified right and justified is that option where the text goes flush to the right edge so that's how i remember it justify has to do with the horizontal placement of things like left right or center a line is the other axis right the vertical axis that's just how i remember it anyways let me put this back to end because that's the actual look i'm going for cool let's move on to the next example [Music] okay in this example we're focusing on this area so there's a purple div that says this is the header this is sort of the main content there's a gray div that says this sidebar area has useful links and then there's sort of a footer area at the bottom now just so you and i are on the same page let me switch tabs to the finished product and this is what i want this area to look like right so the header takes up the full space and then sort of the sidebar takes up this area we've got the main content and then notice the footer doesn't span the full width instead the footer just sits at the bottom of sort of this main column area so this is the overall layout that we want to build using css grid only this time around i want to show you a different way of placing items in a grid before we start let's look at our html structure so i have an overall div with a class of layout inside it there's a header div a main div sidebar and a footer so in the css i'm going to target the overall parent layout div so i'll start a new selector layout display grid let's say grid template columns this is the same property we've been using let's have two columns so one fr and then two and a half fr right if we look at the finished product that will create sort of this column and then the much wider main column now here's the interesting part or the new feature of this example there's a property called grid template areas now before i even type a semicolon here i'm actually going to drop down just to stay organized in a string of text and i'll say header header don't worry i don't expect this on its own to make sense but i think in about 20 seconds it'll be crystal clear i'm going to drop down have another string of text and say sidebar main another string of text sidebar footer and then finally i will end that with a semicolon so we have a two column grid and then grid template areas lets us sort of name and divvy up the space so each line of text here represents a row and we have a two column grid so i'm saying the header should take up both columns let's move on to the next row so then that should be the sidebar on the left main on the right for the final row that should be sidebar on the left footer on the right so this is just a different way of both placing our items and sizing them right not only are we saying that header should come first but we're saying that it should span two columns and then we're saying that sidebar should span two rows right vertically at this point now we just need to assign our actual elements to these names we made up so for the header selector you just say grid area colon header now to be clear here you can make up whatever name you want here it doesn't need to match your class name or your selector so for example i could call it header area header area and then that's what i would use for this property grid area with a value of header area right or just to be clear instead of sidebar i could literally just name that one the letter s and now let's go assign it though so in the sidebar selector you just say grid area value of s let's go set up our main and footer so main would be grid area main footer would be grid area footer so if we test this out and refresh oops back in this tab that we're building cool that alone gave us the layout we wanted really quick though what if the sidebar had more content and was taller than this main area so really quick i'll edit the html to make that true so for example now that the sidebar takes up more vertical space than the main area we obviously don't want the footer to sort of auto size and take up the available space so all we would need to do on the footer is just say align self end right just align it or sort of shrink wrap it to the bottom perfect now if we go look at the template named area we set up this is not very complex because there's only two columns but i encourage you to experiment with this and try to create more complex layouts personally i prefer placing and sizing my grid items the way we did in our previous example by just spelling out the line numbers on each individual element but it seems like a lot of people truly prefer this way of doing things i think it feels more intuitive or it's just easier to visualize for many people so this is something that i wanted you to be aware of okay this next example is my favorite in the entire video by far when i first learned that grid could do this i was so impressed so i have all these green divs down here right now there's no margin or gap between them but each paragraph is sort of wrapped in its own div and imagine on a really large desktop monitor we could fit maybe five of those per row and then on a smaller monitor maybe we can only fit four per row and then on a narrow tablet you can only fit three per row and then maybe on a smartphone you can only fit one per so traditionally to create a responsive layout like that we would need to write media query breakpoints but with css grid we don't need to so check this out this is still by far my favorite feature in css grid here's the selector for the overall parent div so i'll just say display grid and then grid template columns and the magic here is a function called repeat semicolon inside of repeat we give it two arguments so the first is how many times you want to repeat a value so for example let's say we want four columns so we want to repeat something four times and what do we want to repeat four times well maybe 300 pixels or just one fr so this is your width value this is how many times you want to repeat it so that alone gets us four columns but here's where it gets magical instead of hard coding this to four we want to repeat it four times we can say auto dash fit and then check this out instead of hard coding the width value to 1fr we can say min max which is a function remember you give that two values let's say that the smallest any item should ever be regardless of screen size is maybe 180 pixels wide in other words if a screen is starting to get too small and you can't comfortably fit another item per row to the point where they'd have to squish down to be smaller than this then just break down to a new row right stop having so many items per row now the second argument is the maximum value i'll just give it a value of 1fr just to keep things flexible at every possible screen size because i don't want to set a specific maximum size and then finally i'll just say gap 20 pixels and if we test this out cool so it fits five per but if i slowly start to resize my browser window you can see right when they would resize to the point that each one was less than that 180 pixels it's just going to realize that it can only fit four per row and that same process just repeats so once it realizes that it can only fit three perot it just automatically happens and this is the real power in my opinion of css grid we're letting it perform all of the math for us and once the browser is the one performing the math you can do all sorts of sort of auto magic things like this cool so big picture with one line of code we eliminated the need for media query breakpoints now this isn't to say that you'll never use media queries with css grid it's just that you don't always need to reach for them a lot of times something like this will do the trick really quick though just for an example of when i would use a media query well for example this two column layout we set up up above remember with the header the sidebar the main obviously this layout doesn't look good on a small screen like this so here's what i would do remember our layout selector well i would just set up a media query for screens that are only a certain size and larger and then you could just move that entire rule or at least just the properties that have to do with css grid but you can just move those into your media query and now for small screens everything can just sort of take up the full natural space but as soon as the browser window is large enough well it's going to use our grid so media queries are still super helpful super useful you're going to need them in certain situations but like we just saw in this example using repeat autofit and min max you can really create some very flexible responsive layouts [Music] okay this is our final example and we're going to get a bit creative so down here i have this blue background area this is just sort of the raw html and css without any grid code but if we look at the finished product in this tab it's an area that i want to take up 100 of the viewport height so for example i have this link you can click on go to cool new section it scrolls down and it perfectly fills your browser's viewport no matter what the size of your browser is so if i resize and now if i click it it perfectly sizes now that has nothing to do with grid but we'll see how grid can interact with that in a fun way anyways there's a background image area a little bit of text this new badge and then these sort of shapes in the top right and bottom left corner now you could absolutely create something like this using absolute positioning or flexbox or really there's always 10 different ways to solve a problem with css but this is how you would set this up with grid so back in this tab let me show you what i would do so art banner is the overall parent element i'm going to begin by giving it a height of 100 viewport height units so this is essentially like saying whatever height the browser window is i want it to be a hundred percent of that so if instead you said 50 that would essentially be half of the browser window height so we just want to take up whatever the full height is let's use display grid i'll say grid template columns now if we look at the finished product again this is about 20 pixels that this pink shape is sitting in from the edge so again you could use absolute positioning you could use margin but this is how you would do it with css grid so i'll just say maybe that the first column should be 20 pixels in and then i'll have three equal width columns and then i'll have another 20 pixel column at the end let's say grid template rows again 20 pixels down from the very bottom and then i'll just divide it up in three equal parts vertically so 1fr 1fr 1fr 20 pixels okay let's test this out and let me enable grid visualization cool so it divided it up into three equal columns and then of our 100 viewport height it also divided up into three equal rows and then there's sort of a 20 pixel gap all the way around so now to create the desired layout it's really just a matter of placing each piece of content in the correct cell so here's what i would do first of all the overall div has the solid blue background color and then i'm overlaying this photo on top of that and it's transparent so the first thing i want to do is tell that background image div to take up every single cell that there is so that's what this art banner bg element is i would just say grid column start on the first line slash go to the very final line and do the same thing with grid row start on the first line go to the final line so if i refresh cool that background image is now taking up the full space next let's tell this text to sit in the middle row vertically and take up the two leftmost columns so that it sits right about here so on my banner text selector i would just say grid column start on the second line and then span two so instead of saying span two i could have just spelled out the line number i want it to go to so four uh this is just my personal preference sometimes i like to say how many it should span this feels more intuitive for me but then i would also say grid row should be three and it only needs to span one but you really don't need to specify that if it's just one okay before we even test that out let's go ahead and place this badge element so i want that to be in sort of the middle row on the right hand side so for that selector here it is it's called badge i would just say grid column start on the fourth line and you just need to take up one so we don't even need to spell out the ending but if you wanted to you could say 4-5 let's say grid row start on the third line go just one so to the fourth line let's test that out cool we're slowly getting there now when it comes to this text it's taking up these two cells if i want the actual text to be centered within that area and the same thing with the badge if i want it to be centered within its area we can just say align self center and justify self center so i would use these exact same two properties on the badge element as well okay and then in terms of centering the new text within this element or this circle we can just tell it to also use display grid so on the badge i would just say display grid and then we could use properties like align content and justify content and set them to center or remember if the parent is display grid you can just tell the child to use margin auto so i would just look inside the badge for the paragraph and say margin auto cool finally if we look at the finished product we just need to place these pink items in the top right and bottom corners so back in our copy i'm using these pseudo selectors so that i don't have extra wrapper divs in my html so i'm just selecting the overall div and then colon colon before if you give it a content of anything just that it sort of takes up space on the page well then you basically have an element that you can style however you want so i'm just giving it border top and right and then this one has border bottom and left so to place this one in the top right i would just say grid column let's start on the fourth line and you only need to span one so you don't even need to spell that out grid row start on line number two and in this case i do want to span the height of two lines so if we give that a test cool if you wanted this line to go all the way down you could just tell it to span three and then it's going to use the full height right except for the 20 pixel rows and columns on the outer edge let's do the same thing for the bottom left copy so it would just be grid column line number two grid row let's say line number three span two cool and then if you wanted this pink item in the bottom left to be taller or shorter for example if i wanted it to only take up sort of this space you could just tell it to begin on the row line number four instead right so if i change grid row to four and then since we're that much closer to the bottom we no longer need to span the height of two rows we would just span one row which is sort of implied you get the idea cool so all together if we scroll back up now we have this area that when you go to it it perfectly takes up 100 percent of your viewport height and we're using grid to build the entire thing while this might not be the most impressive thing you've ever seen hopefully it gave you some ideas of how you can use grid in sort of creative or unconventional ways that's going to wrap up this css grid tutorial thanks for watching until the very end i hope you feel like you learned something stay tuned for more videos and take care

Channel: LearnWebCode

Views: 78,170

Keywords:

Id: pMVO1OPfVJ8

Length: 41min 11sec (2471 seconds)

Published: Mon Jun 14 2021