CSS Grid: Fundamentals & Projects | Chris Worfolk | Skillshare

CSS Grid: Fundamentals & Projects

Chris Worfolk

CSS Grid: Fundamentals & Projects

Chris Worfolk

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
19 Lessons (42m)
    • 1. Introduction

    • 2. What is grid?

    • 3. Browser support

    • 4. Templates

    • 5. Repeats

    • 6. Gaps

    • 7. Units of measurement

    • 8. Alignment

    • 9. Implicit tracks

    • 10. Positioning

    • 11. Areas

    • 12. Minmax

    • 13. Autofill

    • 14. Projects

    • 15. Two-column layout

    • 16. Article blog

    • 17. Photo blog

    • 18. Article with breakout

    • 19. Final thoughts

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class, you'll master CSS's most powerful layout feature: grid. It's like flexbox on steroids. We'll start by looking at the fundamentals and then move into a series of real-world projects including page layouts, blog designs and photo galleries.

We'll code along together so that you can reinforce everything you are learning and apply it to your own projects. Download the example code from the class project section to get started.

Meet Your Teacher

Chris Worfolk is a psychologist and software consultant. He is the author of How To Exit VIM and Do More, Worry Less.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction: welcome to this class on CSS grid. Great. Is one my favorite tools. And I'm sure that you're gonna love it too. We start by looking at the fundamentals, and then we're gonna move on toe, apply that in a series of real world projects. So by the end of this class, you have used grid in a variety of situations and we were ready to apply to your own website. Let's get started. 2. What is grid?: in this lesson will briefly discuss what great is and why it is so cool. So back in the day, we used to lay websites out using tails and it worked really well. You could have all these responsive articles and sidebars and backgrounds in and Errol scaled nicely, but it was horribly un accessible because tables which is not meant for layups, they're meant for tabular data. And so CSS came along on and we tried to replace table layouts with CSS. We started doing things like floating different columns around and clearing footers. Andi, it was okay. But there were a lot of problems, like you just end up with blank spaces and things didn't go all the way down and you couldn't arrange things the way you wanted. And you couldn't reorder them so that you could display them one way while keeping hates TML still semantic having meaning. And then finally flex box came along and gave us most of what we wanted. Like suddenly we could have these columns and scale them off down and reorder things on. Rearrange things on what was then quite simple grid and it was amazing. Suddenly we had this really lovely, powerful tool. Flex box is great, but it only really worked well in one dimensional Warn access so you could do up 12 columns or a bunch of rose. But you couldn't really do the whole thing across both axes. And that's really what grid is instead of just giving. Is that one dimension? Finally, we've got these two dimensions where we can create these awesome layout with sidebars and mains or photo galleries with everything in different corners on it gives us finally basically gives us that replacement for table layouts that were being waiting 20 years for on. For the past 20 years, we've just been barging with in various CSS tools. Grid finally gives us that's got the same power of flex box, but it works on both axes on. We can finally lay out our websites away. We really want to, which is why I'm so excited about it, and I think you're gonna love it as well 3. Browser support: Let's briefly talk about walk browser you might want to use to do this course, and I'm happy for you to use any browser, a songs. It's reasonably modern that rules that Internet Explorer. But beyond that, the tricks of yours and there are differences in the way displays what's going on on really the development tools. So I'm going to use chrome for this. Andi. I quite like chrome. It's got this nice grid, like when your height hover over the container, it shows you each of the grid elements, and it's got this nice. It's got this slice little dashed line around it to show each thing. Also, Firefox has really good spot for grid as well. So again we hover over. It will show the grid with the little corner markings and the gaps, and those shows each of the element as well and dynamically highlight the grid as we go over them. You could also use edge or safari. Their support isn't as good. There might have improved by the time you start this cast, but the moment no very helpful in telling us what's going on here just highlights big colored blocks isn't super useful If you want to keep going, then you can. But really chrome and safari have probably the best tool. So if you want to be able to debug your grid layout, so the excellent choices, but you can use any browser you wish. 4. Templates: must go ahead and make a start. So if you go ahead and open up this index, start html file in the code and also in the browser, you'll see what you got is a list of elements with some nice big emerges in that we can just use as a sample on. We can just start coding from there. So got wind. It's dump everything into this style tag here. Andi. First thing we're gonna do is we're gonna tell it to display its grid. We can also do obviously need to wrap that. We can also do display in line in line grid if we wanted to do that. There's not many youth cases, but is occasionally necessary. Let's go ahead, baj. It's creating some columns. So put free columns in, um, there we go. And then if only to define our Rosa's well, the residents defined by default at the moment. But we could say something like that. Great. So now we've got one row this high and then the second row because we've marked as to fractional units, that's going to twice as tall. We also say double up one of these, and as we shrink it? No, it's the whole row. Moves down just like a good old table layout. We have a right that we can see that the whole row moved down. Okay, great. So we can also condense all of this life. We don't want to do two different lines in just use the grid template shortcut that will give us the same thing. So just defined the rosy year on the columns here, and that is the very basics of how we separate grid. Let's move on to some more advanced things in the next lesson. 5. Repeats: three outlined our columns here, and it looks a bit clunky because we've just had to repeat the same thing three times. Let's take out this example line, but there is an easier way we can do that. And that's using the repeat function so we can just call, repeat, say how many times we wanted to repeat and then put in the value we want. So here was saying, Can we have four columns, please, of wooden fractionally unit? If we do that, then we get four columns repeated now. It might seem quite lazy at the moment, but we're going to use this repeat function for some more advanced things later in the course, so it's good to know that we can do this now. 6. Gaps: one of their simplest features of grid. But it is an awesome feature. Is the ability to ab gaps between stuff. So let's simplify this carrot of it on. What we're gonna do is at a gap. Let's start by adding a row gap 16. And now what we've got here is each row is now separated by 16 pixels. So a lot of time before, it was really difficult when you were laying so far, even with flex box, to get all the margins between everything different and you could other margin around everything. But then it go into your container and then you'd have to like have a minus margin on the overall container to get it back and still get these nice gaps. We've grid. It doesn't do that. Gap shoots creates a gap between the items in your grid and nothing around it. Onda. We can do a similar thing with column gap so we could make these numbers different if we wanted. Let's just to 16 by now, and then we go perfect. So it's added in our gaps and then re calculated the fractional whips. Now we can, of course, just defined those as one. Uh, let's make one of them 32 1 of them 16. So there we go, a rogue up. It's now 32 on our column. Gap is 16. If using an older version off the grid specifications, it used to be called Grid Gap, and it's now just been simplified to cap. So if you ever see that and you wonder why everyone pre fixing all the gaps with grid dash , that's because that's what the old specifications used to be like. Also, if we just want to add one single value for both rows and columns, Weaken just had one. Just like if we're doing patting on margins on, there we go. It's back to 16. 7. Units of measurement: up until now for units of measurement were being used in these fractional values and also pixels. So let's talk about those. Just get rid of these on. Really, we can use any CSS unit of measurement here so we could give it a pixel value. We can use these fractional values, or we could use a percentage as well. Or if you want to use the EMS or realms, that's fine as well on. We can also use this auto, so let free fresh the page and talk about what's happening there. So in terms of columns with great one that's 150 pixels wide and we've also create this, which is 30% wide, so that would get smaller. And then we have assigned these fractional values here. So this is one fraction, and this one is to what's going on there. Well, fractional value is the space remaining. So when the browser tries to lay it out, it says, right, I've got 150 pixels here. I've got 30% here, which we can see adds up to 20. So once it's worked those out it knows right? I've got free 70 to minus off on now have this remaining space here to defied between the fractional values. So if we just had both of these tow one, then it would just divide to space equally between. But because we've said this one who wanted to take to fractional values that now gets twice a space or if we wanted to say, have this one at 60% in this one at 40% we could do something like free on two and then again with the Rose Weaken, give it this absolute air. It works exactly the same way that hero Kunitz's pixel value, which has made it 150 pixels on this one, I said, auto and auto size is it down to the content? So it just whatever you stick in there, we'll base it off that so depending on what you're trying to achieve with grid, you might use completely different values here. But understanding how these fractional values working and playing around with those is really important because they're super youthful in a lot of this stuff that we're going to do 8. Alignment: in this lesson, we're gonna look a alignment and how we place things inside the grid. Said to do this, I'm going to start by changing the Collis King back because I think it will make it a lot easier to see. Changes this as well from neatness. Let's make that back and kulak. Okay, cool. And then let's fill around with these as well. Change this back to just substandard. Three columns on for the Rose. Let's use the old repeat function and create free rows of 150 pixels. Cool. So now we can see this blue outline. That's chrome highlighting the grid. Andi, we've got our components in here and they're left aligned inside their item on the grid, but also their stretching all the way down so we can start fiddle around with how we place them. For example, we can use justify items not set up to center, and now we can see that the content inside the grid item has moved to so it's kind of center aligned on the X axis los that end. It would move to the end, and we can do the same thing horizontally so we can say and and they've all moved down. So by default it's a value call stretch which stretches it for the whole grid cell, super useful for filling out their backgrounds. But we could also say and and it will move all the way down to the end. So even though we create a grid and it's got these cells, we can even get the content inside to stretch right across it, or we can get it to a line off places we want. Now that is a place content that allows us to justify underline the same time. But the supporting edge isn't as good, so it's often easy to just define them separately. We can also set this on the individual items so we can use justify south on a lime self. If we wanted Teoh set them individually, which we probably will do later in some of the projects. But for now, you can have a play around with how you justify and align them so you can do still upset to end. You can also do this stretch to fill the hole space 9. Implicit tracks: So far, we've defined enough elements of our grid that the content generally knows where to go. But what happens if that isn't the case? Let's look at that now. So start budget for averting these color scheme changes I made on. We'll get with that for the moment on them. For the columns. Let's use the old repeat function on Give us two columns so it's providing these two columns. But what's it doing with these rows? And how does it know we do something like template rose and could be two rows here. Great, these 1st 2 rows. But how does it know what to do with the remaining ones? Well, the answer is we need to set the auto property so we could start by saying, OK, we're going to get some rose on. We could to say we want them to be 300 pixels. So whenever there isn't a row, explicitly would find in the grid, uses auto value and create free 100. And then we go. They've all gone to 300. These were defined by our grid here. On the rest, use the auto value and we can add multiple ones for repeats So, for example, you could say, Do you 301 50 and then we g o This is the first auto road find it's free 100. This one's 1 50 this one goes back to 300. And if there was no one below, that would get back toe 1 50 as well. Now my default grid is going to flow into more rows. So once the columns that done L jets add more rows. But that's something that we could configure so we could say grid or toe flow by default. That's it to row. But we could change up to column Andi. There it starts, adding extra columns on. We could set the size of that as well. I want to make a wall for 100 pixels. There we go. It's cricket, some scrolling. But every once the grid has been filled, it's now creating these extra columns, and it's using this also value to say we want them to be free 100 pixels wide 10. Positioning: so far, we've just let the browser lay out each element on the grid. But we can take control of that and we can position them as we see fit. So let's take this code out for now on to make things a bit clearer as to what's going on. Let's add some numbers here to represent the order of each element on, and that's changes up. So we got free column layout. We don't need to define Rose Cool. So there we just got everything laid out in order. But what if we wanted to change down? Let's pull out the third element and we're gonna say we want number free to start on the second row and we also wanted to span to so here we've selected at Third Element and we've said started on Row two on instead of just spun worn, which is the default we wanted to spawn, too on it spanned down to here. Super. Let's look it, you know, for example, this time, let's pick out the seventh element. Onda. Let's use some on long hand here, so let's say you want us to start on the fourth row and we wanted to span free boom. So we have taken the seven Philemon out. We said move all the way down to the fourth row and ban across three columns so we can use this grid column Grid row, where we specify the star on the span. We could also just take out the word here like instead of saying span to, we could just say end on to In this case, we need to say free because it's for free. Let's just leave that spun to for now and then on this bottom element we've said Okay, starting row for and span all the way across. Now this is a good example of a child element where we can also add these justify south I just sent into default, but now as well if you wanted to position the content within the grid positions. Going into the child is where you would use this. Justify self on a line self, so we don't have to just take the layout as we wish, as the browser would flow it. But we can also go in and start telling specific individual Children on the grid where we want it to start where we wanted to end, how far we want to span across both the rows and columns 11. Areas: as well as manually specifying how we want the Children to appear. We can also use something called areas to quit named areas where the content will go on DSO . Let's look an example of how we do that, so we'll call it good template areas on. We'll say he needs a free column layout. We're gonna have head ahead on a main main sidebar, and then we can tell certain components Teoh occupy a grid area. Can this one? So it take 1/3 element and say, Put that in the header. Let's take the fourth on seventh until the fourth to occupy this main area on the seven to occupy this cyber area. Good. So we're taking the third element that's taken a header area and see would find Header as all appear. Then we take in the fourth element that's taking this main area on seventh has taken aside by area and then all the other components, so they've just flowed down below, so you can see it's not kind of forced number one to be the 1st 1 We've manually taken the mystery and put it up into this area where defined as the header and we did the same thing for four and seven, and then everything else has flowed down. This idea of naming stuff, often on the lot projects it's more of a novelty. There are occasional use cases where it is helpful, but it's good to know it's there. If you'd like laying things out, it does make it quite look quite intuitive in the CSS, so you may want to use these named areas. 12. Minmax: in this lesson, we're gonna look at Min Max, which is really non X function for getting some responsive design, going without media queries. So wants to find me columns. I want to say one fractionally in it. Well, I'm gonna use Min Max. We'll talk about what that means on one. While fractional unit was Get rid of this well defined here is instead of just giving it a straightforward value, we've called this men Matt function on its what it sounds like we're giving a minimum value here on the maximum value. So if it's got the space, it will just expand outwards on one fr. But it will never shrink below 200 pics. Also, if we got something where that's true, it's the absolute minimum, which we need. We can define it like this, and if we just refresh, we've now got off free columns and everything here is over 200 pixels. So it's chips using the one fractional units, everything. But as we shrink it down, what we should say is that Columns one and free that one fractional unit will continue to shrink. Whereas when this column hits 200 pixels, it won't shrink any further. His moment of truth on. There we go. So the middle column is staying out at 200 pixels, and everything else is then the remaining spaces, just divided between the columns that just have one fracture on a unit and down minimum value defined. 13. Autofill: or to fearless, sometimes talked about the secret weapon off grid, and it's incredibly powerful for cream responsive designs. So let's write some code and talk it through. So we're gonna use a repeat function here. Andi, Instead of giving it a number, we can use this auto fill property, and then we're going to combine it with a min max. So what we're saying here is repeat as many columns as you can while fulfilling this so the minimum width column can be is 200 pixels. Andi. Beyond that, you space them out equally. So what we get if we do that is that the columns will always be at least 200. Us. They minimum value would define, but beyond that space and equally and fit as many on that possible. So if we get even bigger will eventually go to four on five columns. And this allows us to create some really nice, responsive, grid based layouts without any media queries. All because we can set our minimum value and grid will then shoots create as many columns as it can. You could do the same with Rose if you change the flow, and as we shrink it down. It just resize is beautifully. So again, the syntax is just which is going to call up repeat function. And we're gonna use this auto filled keyword and then we just going to set a min Max based on our requirements. 14. Projects: welcome to the project's module here. We're going to put a lot off what we've learned so far into some kind of real world practice on, and there's a bunch of sample codes. If you go into this project's directory off the sample code, there's all your projects here. And for each warn, you confined both a project file and a completed file. So the project file is just some shell hates Jamal, and the completed file is the kind of solution to the problem. So this is all the code is done for you, and you can just copy that if you want. And we're gonna go through how to do this in the lesson. But what I'd encourage you to do for each project is open up the completed file, see what it looks like in new in your browser to see what you're trying to achieve, and then start with the project that hates to male and see if you can figure out yourself and if you can, then great. If not, then follow the video lesson through, See how your solution compares to my solution. On that way, it really get you thinking and learning, and hopefully we'll be super useful 15. Two-column layout: Let's make a start on our two column layout project, so must go ahead and we'll open up. I'm going to projects and two column layout, and that's open up the completed project. So when I had that nice footer got article and the sidebar, let's open up the project file as well to see what we've got so far, and we'll have a bit of our developer tools to. So this actually looks pretty good in a mobile view. It's probably what we want, so we don't need to do anything that we just need. Teoh change the layout before that stop on our great. So it's fine to go on layout and let's open up the project file on because it looks fine on O vile. Let's start by adding a media query and say we only want to change anything under 600 pixels. And our components a legit strapped bodies who've got header on main are aside. Our foot that's toe the whole body to display as grid. You could put it in a rapid component if you wanted on. Let's create some columns, so we want the sidebar to be a nice whip on. Then we want the article two jets flow in the remaining space so we could say Just give the main One fractional unit would make the sidebar 300 pixels if we refresh now we've done is create a block of four. So we also need to do is go and tell the footer on the header that we want it to span two and that's it. That's all we needed to do. So we've defined our grid. We look at the body and then we just told we told the columns to lay out in this responsive manner. And we told a header and footer, Teoh, span across to and a lot of grid layout really Is this simple? They're not massively complex projects to actually get something, so but this that works really well, really nicely Scales really well is often super simple. 16. Article blog: but this project we're going Teoh style. Ah, blawg filled with articles. So let's go ahead and get our complete file up. This is what it's gonna look like. It's got some lovely blood post with an image and then some texts and a little highlight below them. And it wants to be nice and responsive as well. Cool on. Let's open up Our project file currently looks like this Servings Jets in a big line. Okay, let's find the product file here on Let's start styling So everything's inside this main tag, and then we've got these dibs with an image and a hate to it. So let's start by turning the grid on on that side, a nice little gap, unless on some styling to the elements themselves, we'll turn the massive deport marginal fakes to add a bit of padding. Cool is almost a start, Andi. Now we just need to find our columns and let's use that really cool repeat auto flow stuff we learned in the auto fill lesson. What it feels so enought it flow on. We're going to say repeat, will auto fill it. I will say, Okay, don't drink any less in 2 50 pixels. That would be fine for any even a mobile screen and just auto Fila's many columns that he can Well, for filling this on boom. Okay, that we dio so you can go up to four columns wide, maybe even wider if I turned off the developer tools and as we shrink it down, scan this beautiful, responsive grid I don't quite made. The image is big enough there, so a little bit of gray. We could just do that by loading a slightly bigger image, but most of the time it's absolutely perfect. And we've got that beautiful responsively out. Yeah, I would go. Most of the images are slightly different, but looks great. 17. Photo blog: we've done our article Blawg. Now let's try a photo. Blawg. So we'll go into the photo. Blawg will bring up the completed and I just got this lovely wall off photos. Looks nice on. Then we'll bring up predict file as well. Such it's a big list of images of the moment, which is what we'll see in the Hoekstra. Mao. Yeah, just all it is is literally a bunch of I am G tax inside the main. Let's start thinking about how we can style this. So obviously we're gonna in the main. We're gonna turn on grid. I'm allowed a little gap. Um, should be pretty straightforward here. So let's aunt free column layout on just to get those lovely little rounded edges as well. Let's give it a border radius. Six. Cool. So I've now got this nice grid or photos, but obviously, in our example, we have some of them really pop out. So let's go. And that in a swell it stays up the 1st 1 If I could spell, let's take the 8th 1 as well, and if we wanted to repeat, we could do something like every eighth. Let's just deviate from for now, and we want to tell these photos to span two. And we wanted to spend two rows and two columns. And then just because it won't quite match up perfectly gonna tell the image to be 100% high. Take up that whole stretch width. And now, if we go back, perfect. So we've taken the 1st 1 on the 841 on. We've told them to span two columns and two rows. Each sizing isn't perfect, which is why we also set the height. It's just stretched out to fill the space, and this is fairly responsive. It's not perfect. I think we would lay things out differently on a smaller screen because if you start getting right down to mobile, maybe everything's a bit too small. Proven that whatever screen you've got, you've got lovely, responsive photo gallery 18. Article with breakout: back in the day, we'll have our own blawg on it. We thought it looked good, and then medium came along and showed us something that looked way nicer on DSO. In this project, let's try and do a poor imitation of medium Andi will in. We're in this article of breakout, and that's open up their completely look. So we've got this nice tax that's constrained. It's not too wide so that their uses having to scan all the way across the screen. But for the photos, we put these lovely wide breakout images. Cool. So let's open up our project file and see what we're working with. Looks OK already. We just need Teoh sort. The texts were found. Onda. Let's open up the project file and let's get a work. So the way this is gonna work is I'm going to define this as a grid with free columns. So we've got a kind of space, a column and article column in the space of column. So it's display grid the main, which is where all the content as on will put one generic space of in. I will say the art will be scared for 6 50 Channel one of the spacer in there. Now, if we do that, of course, everything is going to go terrible because we've main desk. And that means that the hate one paragraph tags and the image hugs or gonna be Children that'll display in this weird, horrible cred. Yep. But here's the magic that we're going to do to fix this. So if ah hey H one tag on a paragraph tag when a talent to start in the second column, we've defined our columns here. We've got the space, a column to this main content column and we're going to say for all the textual content and you need to do this for every tag that was in there. The way we're doing at the moment is we're going to say it to start in Column two. Nice. So now everything's in this beautiful 6 50 wide, and the rest of space is just filled by these fractionally units. So we just need to sort these images out now. Okay, so let's go do that on that. Safe for the images. Well, just Canady's equivalent column Shocker. I'm gonna say one starting column one and we wanted dis man free column. So it's going to start in this space of column, and it's going to span the text column and the over space of column as well. Now, if we refresh that perfect, I think the image isn't wide enough. Is the problem I've got here because obviously you need quite a wide images. This one wider? Nope. Perhaps should have hard coded this. We have a really wide image, strong with my time. Okay, so let's just size that drives it down smaller for the images. Obviously, if you're gonna do this, you need an image that's wide enough. But we can see here we've got taxes still contrary. And by this middle section on, then the image spans across both the space of columns on the tax section as well. Factor I just made Just ask for two small images. That's what's going on here. There we go. Beautiful. So now we can go up. Teoh 1200. The image will run out eventually, virtually shrinking and out. I am in protects the whole space on the Texas still can train so you can read it really nicely. 19. Final thoughts: now that you've learned the power on functionality off CSS grid, I can't wait to see what you come up with. Post your completed projects in the project section off this class, and I look forward to seeing them all. See soon.