Transcripts
1. Introduction to the class: Hi, my name's Luke Faddish, I have been a professional software developer for nearly 20 years now. But today, I'm super excited to be starting our class. In this class, we are going to learn how we can use CSS grid to build an online web portfolio. If you're not familiar with it, CSS greed is the new CSS standard for laying out complex web pages. Previously, to do this, we had to use large frameworks like bootstrap and foundation, or a bunch of CSS hacks that displayed differently in every browser and this is the problem that CSS grid solves for us. During this class, will implement this online web portfolio that looks and works great in desktop and mobile devices. I've also put a bunch of resources into the project area to make it super easy to start your project. I'm going to be with you every step of the way during this class, so if you run into any problems or need some help, don't hesitate to let me know in the community discussion area of this class. Otherwise, I look forward to seeing what you build with CSS grid.
2. Who this class is for: Who is this class for? This class is for anyone who wants to learn how to create a web layout using rows and columns. This is what CSS gives us. It is an intermediate level class. I'm assuming that you already know a little HTML, CSS, and that you can use a text editor. If that's not the case, don't worry because we're here on skill share. You can find classes on all of these things with a very quick search. Head off and do that if you need to and then come back to this class. Otherwise, sit tight for the next lesson, where we'll go over in detail what we're going to learn during this class.
3. What we'll cover in this class: Welcome back to our CSS grid lesson. This is going to be a very quick overview on what you're going to learn in this class. The very first thing we need to do is talk about what CSS grid and to learn about that, we need to know what a layout system is in CSS. We'll talk about what that is. We'll talk about other CSS layout systems. We'll see how CSS grid is different and finally, where we can use it. Then we'll go into how we can define CSS grid columns, we'll have to use display grid. We'll find out about making columns using grid template columns that's a CSS style rule. Then we'll find out what the fr unit is when we're measuring columns. Then we'll work on a very simple example that demonstrates the use of the CSS style rules. After that, we'll go into creating a more comprehensive and complete layout. This is where we'll get started on our class project, which is the portfolio. We'll learn how we can paint a grid using grid template areas. We'll see about grid area, children, and we'll work on our main project. Like I said, the portfolio we'll also spend a little bit of time talking about how we can position content inside columns. For that, we'll use the justify self CSS rule and also align-self. Then finally, we'll work on making some space in the grid, using grid gap. The very last thing that we really need to talk about is how we can make our grid layout responsive. How do we make it look nice on desktop browsers and on mobile and phone browsers as well. We'll make our layout responsive and we'll use @ media queries to define different layouts. Sit tight for the next video, where we we'll talk about what CSS grid actually is.
4. So what IS CSS Grid?: Hello everybody, welcome back to our CSS grid introduction. In this video, we are going to talk about what grid actually is. Before we talk about that, we really need to talk about what are the layout system is because this says grid is a new layout system. Layout system is a set of rules that web browsers use to arrange elements on a page predictably. Sounds like a little poem. The point here is that browsers use this standard set of rules to arrange our elements, which is to say like H1s, divs, and spans, and things like that in a predictable way. The web pages look more or less the same in different browsers and set the default CSS layout is to treat everything like a box. Things are either stacked up on top of each other or next to each other. If we have a web page, this gradient is like the web page here. We could have like a big wide div that goes across as a header. Our main section would be stacked underneath that, we aren't really stacking on top of each other, the stacking underneath, but you get the idea. Then inside there we have things that are next to or on top of each other. This was great back when websites looked like this. But ever since then, we've been hacking away at the default layout system so that we can make web pages look more like this. If though we don't want our web pages to look like a newspaper, we still want things to be arranged in rows and columns. You can see here that I've laid out some lines to show what we're talking about here. What CSS grid can do for us is to define rows. Now a row would be this section where we've got news, the big headline there and then underneath that we've got another row which contains all the news content. Then we can define columns. You can see that the news content like that second row there, with things inside it. You can define columns to put things into. We can arrange things inside those columns. Now, this is where like the standard CSS box layout system comes back into play. Things will be arranged there in the usual way. It's just that we've sectioned off some parts of the page so that they are treated a little differently. That's the CSS grid layout system. However, it does give us the option of arranging things inside those columns a bit differently as well. We can use them different styling rules to center them horizontally or vertically, which is always been a major CSS challenge. We could also create gutters as well. Now, gutters are these spaces in-between rows and columns that give our page a little bit of breathing space the space things out a bit doesn't make it look too crowded. Is there a catch to using CSS grid right now since it does all these awesome things for us? This is the catch right here at the time of recording this video 75.34 percent of the Internet is using a browser that supports CSS grid. Now, that's not much of a catch because that number is increasing all the time and it's increased quite quickly. However, you need to know that if you're using CSS grid on a website or roughly three-quarters of the internet, are going to be able to use it the way you intended it to be used. But like I said, that number is increasing all the time. I think CSS grid is something that we all need to learn for the future.
5. How to define CSS Grid columns: Hello and welcome back to our introduction to CSS grid, where we are going to build our own online portfolio. In this lesson, we are not going to work on our portfolio. We are going to start defining some CSS in grid columns, and we're going to use another small example page to do that. What are we going to cover in this video? We'll see how we can define CSS grid columns. We'll find out what the fr unit is. We'll arrange content inside a column, and we'll do that by building this funny little example page here. You can see where tilings and content across the page. The very first thing we need to do is check out the HTML we're going to use to do that. Now we're not going to edit this HTML. We're only going to be working with our CSS. However, it's a great idea for us to be familiar with the structure of the page that we're working with when we edit our CSS. All the code that we're working with today is available in the project resources section and the CSS grid column, example.zip. You can find the HTML, the CSS and the images we're using for this little page so that you can work along with it as well. But first, here's our HTML. Here we are in our code looking at the HTML and you can see that we've got a fairly typical HTML web page. We are linking to our CSS grid columns,.CSS here. Then we get down to look at the body of the web page, which is the bit that we're interested in. You can see we've got an asset containing <div> with class container and inside that we've got a series of other <div>'s. One of them has an H1 in it, and then four have images inside them: road 1, 2, 3, and 4.jpg. Then finally we have some credits. This is where we get our road peaches from and that's all there is to our HTML. Like I said, we're not going to edit this, but we need to know that we've got a <div> with class container and inside that <div> we have a series of other <div>'s that contain our content. Next, we'll have a little introduction to our CSS. Here's our current CSS. As you can see, it's pretty simple. We've set up some topography for the body and reset our margins to zero. We give our H1 a large font size and we said that all our images are going to occupy a 100 percent of the container they are within. Then down here we've got these two little lonely CSS selectors, container and then <div>'s inside the container and this is where we are going to put our CSS grid code. Let's head back to the presentation and see what we're going to do to implement our little web page. First, let's take a look at how our web page looks right now without our CSS grid code and here it is. As you can see, it's looking pretty rotten. We've got these enormous images and our header up at the top and then our credits down at the bottom. This looks nothing like the example that we saw in the presentation. Let's get on to fixing that right now. Our very first grid style rule will be display grid. As you know, we can set our display rule to block or inline or inline block or flex the CSS grid. If we're going to overlay things out using the CSS grid layout system, we need to set the display value or the display rule to grid. That goes on the selector for the parent element. This is the element that contains everything else that's going to be organized within the grid. Let's do that right now. Here we are back in our CSS and you can see we've got our container class. Remember, this is the element that contains the rest of the web page content. The first thing I'll do is say display, type a grid. This too really won't help our web page very much because if I give that a reload and you see all we've managed to do is stick our credits over the top of our images and everything else is laid out fairly erotically. We can start to fix this by applying our next CSS grid style, which is the grid-template-columns style rule. This is the rule that we use to define how many columns our grid is going to have and what size they are, and wait for it. This is one of the ways which we can use to describe the size of these columns. We're using this curious unit called fr. Now we could easily use a percentage value, an M value, a pixel value, pretty much any other kind of unit that you can use in CSS, you can put here. However, I'm using the fr unit because it's pretty idiomatic for CSS grid and also because it's quite an interesting thing. What fr stands for is fraction and when we have 1fr 1fr 1fr, it looks kind of weird, we have nothing to relate that value to. But what this actually means is because we have specified three values here, that tells CSS grid that we want it to be chopped up into basically three bits and because each value one and one and one is equal, that means that each one is going to be equivalent to one third of the page. Now, I have to tell you, I struggled a little bit with this whole fr idea at the beginning because that seems really intuitive. I want three bits and I want them to be of an equal size but I'm not used to a computer doing that much thinking for me. It's kind of so intuitive to me that I found it counter-intuitive. I don't know what you think about that. However, if we had said 2fr 1fr 1fr, so there were still three measurements provided, but the first one was two and the other ones were one; that would mean that the first one would occupy 50 percent of the page and the other two would occupy a 25 percent each. Now we'll have a bit more of a look at how the fr unit works for later in the class. However, for now, let's just take a look and see how this affects the layout of our web page. Here we are backing in our CSS and grid-template-columns needs to go in the parent element, the element that will contain or hold everything else we want to be organized using CSS grid columns. We can say 1fr 1fr 1fr, we can save that. Then we can go back to our web page and reloaded it and holy molly, suddenly everything is organized. You can see that we've specified that there are three columns, but if you recall in our HTML, we've got like 1, 2, 3, 4, 5, 6 <div>s here and because we've specified more elements than we have columns, what CSS grid has done for us is wrap them across to a new row. This is pretty handy, right? We've got each one of these things occupying one-third of the screen and CSS grid, because we've specified three columns by given it six things to display, it does wrap them across to a new line and still laid them out in even columns. Something I should mention, you might be wondering, well, what if I had like 20 columns, would I have to write 1fr 20 times? That would be like really boring. Happily, we have in CSS grid this thing called repeat, which is this quickie little CSS function that says we want x number of things of a particular size. In this case, we can say we'll have three 1frs and the upshot of that is that if I reload that it's exactly the same, we can see that our roads headline and our credits are jammed up in the top left of their cells and we'd like to fix that. Thank you very much. Let's see what CSS we can use in the CSS grid layout system to fix that. This is really a topic of arranging content inside a column. Now we're going to use the justify-self rule, center and align-self: center. What do these mean? Justify-self is talking about arranging things horizontally. We can have center, right, left, and so on. In this case, we're setting it to center, so we want things to be in the middle, horizontally. Then align-self is all about aligning things vertically, so we can stick things to the top, or to the bottom or wherever of a cell. In this case, again, we want it to be in the center. Now, we apply this to something that's inside our grid container, not the grid container itself. You'll see what I mean in a moment. Here we are in our CSS again, and this time we want to apply the justify-self and align-self rules to <div>s that are inside our container. There we go. If we head back to our page and reload, you can see that our roads headline and our credits have popped into the middle of the cells. This is a super fast introduction on how we can use CSS grid rules to lay out content in a web page just using columns. We haven't started talking about using rows yet. Just a quick recap. In order to tell the browser that we're using CSS grid, we need to set the display rule of a container element to grid. We can specify how many columns we want in our grid using the grid-template-columns rule. We can either specify each column individually, or we can use this repeat function to specify how many columns we want. To arrange content inside our CSS grid container, we can use the justify-self rule and the align-self rule. Justify-self is for arranging things horizontally and align-self is for arranging them vertically. Now hang tight for the next lesson where we start on our portfolio project and we see how we can arrange things with both columns and rows in CSS grid.
6. How to create a layout with rows and columns: Welcome back to that introduction to CSS grid where we built out an online portfolio using CSS grid. This is where we define rows and columns and it's also where we start our project. So what are we going to cover in this video? We are going to learn how to define a layout using a CSS grid rule called grid-template areas. Then we're going to use a new rule grid area to put elements into the layout. Which is to say to place them inside the layout that we defined with grid template areas. Like I said this is where we're going to start our little portfolio page, and just to see what that looks like. Here we have it right here. So this is our example portfolio page. We've got landscape or portraiture studio image and a commercial image. Obviously, you can have whatever you want inside this picture area. You can have a little slideshow. I've just got a single image and each of these links to a separate HTML page with exactly the same structure. The only difference being that each displays a different image. Would have been much nicer to use one HTML page and maybe have some JavaScript or something to switch between our images. But for the sake of sticking to learning about CSS grid, I've kept things as simple as possible here. So this is what we're going to start during this lesson. So the first thing we better check out is the HTML that defines the page structure. Here we go. Here's our landscape HTML page. Like I said, the landscape portraiture studio and commercial pages are all basically the same. They just display at different image and there's nothing too shocking here. We have a fairly standard HTML head section. Then we get into the body, our content is contained within a main element right up here. Then we go into our H1. Then we've got our navigation, which is our portfolio and navigation. Then this is a little nav element with ID portfolio nav. These are IDs, we'll see why they are important soon. Following that, we have our portfolio item which is the thing that appears within the portfolio page, and we're just linking out to an image. Again for brevity I've coded p1.jpg. Then a little copyright yours truly, you put your name in there. Finally at the bottom we have some site navigation which is another piece of navigation with an ID site nav, and then just some links that would go out to other parts of the site. I've just used a "#" href here, or a pound. Again, because this is an example web page. Once again, we are not going to edit that HTML during this class because we're focusing on the CSS for CSS grid. Speaking of which we should check out our CSS as well and here it is. I should mention that once again, I've got the HTML, the images, and CSS for this portfolio page in a zip file called CSS grid portfolio, project.zip. That has all of the HTML you need, the images and the portfolio.CSS file without the CSS grid specific CSS inside it. That's for you to fill out as you do your project. Most of the existing content in here is to do with typography. We've got one rule for our images, which is to once again stretch them to the available space that they have when they are placed in the layout. Then everything else is pretty much just setting text, styles, and sizes. So nothing grid related there. So now it's time to implement our very first CSS Grid Style Rule. Just like last time, we'll set our containing element in this case it's the main element in our HTML. We'll set that to have a display rule equal to grid. So here we are in our code I'd just put in main display grid. Before we do anything else, we should go and look at how the webpage looks at the moment. We've just been looking at a completed version. Let's see how it looks without our grid styling. Save that and here we go. So this is how it looks at the moment, not too pretty though showing off the photo very nicely. But that's not how we want it to look. So I'll just put that back in there, give it a save, reload and look not much has changed. But we'll get back to implementing the rest of that grid layout now. The next thing we want to do, just like last time we'll set up some columns and it's a bit different this time. We're using our one fractional unit of the page for one column and then three of them and then 0.1 of them. I don't know about you but I don't find it super easy to add all that up and think about how it comes out in the actual layout. Basically what I did is I decided I want my columns to be and then adjust them until they looked right. But we'll put this in for now and then when we move through this video a little bit more, we'll be able to see more clearly how this actually lays out. So back in our code add or once again will say grid template columns 1fr, 3fr, 0.1fr. How does that make out page look? Kind of insane. That's how makes it look. But if we move into the next part of this video, we will see how we can rearrange this all to make it layout in the way that we want. So this is where we actually get to describe how we want the layer to look and the CSS rule that we're going to use is grid template areas. Now this is a way of defining how content sits within rows and columns. Now there many different ways to do this in CSS grid. I personally find this the most intuitive way to think about it, which is why I've done this here and generally stick to it in my own work. But this is the value that we used that I understand it looks like a lot of stuff right there. But if we go over it, we can see that there are three strings here. Each of those strings represents a row. So we've got header, header, that's the first row, and then portfolio nav, portfolio item, that's the second row, and then portfolio nav and site nav, that's the third row. So let's see how this actually looks. If we have this big gray rectangle here, pretend that's our webpage. If we look at our columns again, we can see that our first column takes up roughly a little bit less than a quarter of the left-hand side. Then we've got almost three-quarters taken up in the middle. Then on the far right, we've got the 0.1fr. That's a tiny little column over the far end there, and that's what I'm using as a bit of data on that far side. That's what our columns look like, but let's see how our content can be laid out using this grid-template-areas value. Once again, for reference, here's that value and we'll just plop it down the bottom corner there. If you look at the first row when we've got something repeating twice or more than once, that means it spans across either columns or rows. We've got a header here that's appearing in the first row, and that means that it's going to occupy two columns. Then we've got portfolio-nav and then portfolio-item. We can see that we've said, okay, portfolio-nav is going to take up the first column and then portfolio-item is going to take out the second column. Then when we get down to the third row, we've got portfolio-nav again and we can see that it's spanning across rows. Then finally, to fill up the last bit of that row and column, we have our site-nav. Now, as I said, there are different ways in CSS grid that we can define rows and columns and how elements span across them; how they fill the space among those rows and columns. As I said, I find this the most intuitive and straightforward way to express them and to understand them. The next thing that we should do is put this code into our CSS. If you're playing along at home with your startup CSS file, please do put that in here as well. We make inline just for clarity, really. Portfolio-nav followed by portfolio-item and another new line. Then portfolio-nav followed by site-nav. That's all well and good. But how do we actually put things in there. Say, we want this part of the page to go in the first row and span two columns and then we want the next part to fit over here, then the next part of it next to that. This is how we do it. Replace elements in the layout using this grid-area CSS rule. These values relate back directly to the values in our grid template areas. You see we've got a header here. Let me go over here and here is header once again and notice it doesn't have any quotation marks around it, which is quite different. It's as if we've created a new CSS reserved word, but we haven't. We've just given a name to a section of our layout which we get to use later on and we'll use it using grid-area. What we're going to do is define a few of these and they all relate back to the values in grid-template-areas. What we do is we go into our code where we are here. Then we say, we wanted H1 to have a grid-area value of header. If you can actually see up here very clearly, that we spare saying, we want our H1 to span across two columns. Then, if you recall, in our HTML, we've got these different elements: nav with portfolio and ID of portfolio-nav and then a div with an ID of portfolio-item and an ID of site-nav for this one. You can see that they relate back to the values used in grid-template-areas. We don't have to do that. I've just given them the same name for clarity, and to help us understand how they relate together. We can give them any name we like, and then we can put them together in the CSS and the CSS grid layout will place them in the appropriate place. We'll say portfolio-nav element, we'll say grid-area portfolio-nav and then, of course, we'll say portfolio-item. Then finally, our site-nav takes a grid-area of site-nav. Now we can save that and take a look at how it works in our web-page. Here's our web-page, as we last saw it, a fairly, sorry site. If I reload, you can see it's looking a lot better. It's not all the way there yet, but we can see that our page is much closer to what we want. Moreover, we can see that it's been laid out according to that grid-template-areas CSS rule. We've got our portfolio. You can't really see that it's spanning all the way across here, but it is. Then we've got our portfolio navigation going down the side and then our portfolio item over on the right-hand side here. Then finally, we've got our site navigation tucked away underneath it. You can see how we've used our grid-template-areas CSS rule to describe a layout and then how we've used the grid-area CSS rule to place individual elements within that layer. Now sit tight for the next video where we will arrange our content a little more nicely within our layout.
7. How to position content inside grid columns.: Okay. Welcome back to our Introduction to CSS grid. Now it's time to start positioning some of those elements in our layout because we can see this and things here that aren't quite right. We don't want our portfolio header all the way over here. We want it to the right, and navigation here for the different portfolio pieces should be done in the middle here, rather than shoved up the top where it is now. That's what we're going to fix in this video. What are we going to look at? Something that we've covered already, which is the justify-self rule and align-self rules. We'll also make some space in our layout using the grid gap CSS grid rule. The first thing we want to do is to shove our h1 all the way across to the right, and we'll do that with the justifies self-rule set to the value, right. Here we are in our code and we'll just pop that right now justify-self, right. Save that. Give that page a reload, and we can say our portfolio header has jumped all the way across to the right there. Next up, we want to fix our portfolio navigation. For our portfolio nav ID for our element, we want to give it the align-self value of center which is a way of aligning it vertically in the middle. Here's our portfolio nav CSS, and we can say align-self, center. If we give our page a reload, there we go, puts our portfolio navigation in the middle. We can say that our page is starting to look and work the way that we want. But there's one more thing that we want to do, which is to create a gap between our rows and columns, and we're going to give that a value of 1em. This also goes on the main element, and this is the parent element for our CSS grid. That's the element that contains the grid. It's where we say display grid, and it's where we assign the grid template areas. We do it here because this is something that affects the behavior of the entire grid layout. We'll say grid gap 1em. Now this affects rows and columns. Now we do have grid-row-gap and we also have grid-column-gap. Now these rules can be used to specify different values for the gaps between rows and columns. But because I want the same value for the gap between the rows and columns, I can just use grid gap as shorthand. I'll save that and update our browser, and you can see that we have just put some space in between everything. There could be more room between our image and the portfolio, the header and the navigation at the bottom, and it's just coming a little bit and credit a bit more space in our layout. That's pretty much everything we want to do with this page in its current form. However, if we come out of our full screen mode here, and I grab this guy and start making it a bit smaller, and smaller, and smaller, and smaller, you can see that this isn't really a mobile-friendly layout. The next thing we're going to do is update our CSS to make it responsive to the size of the browser, so that it shows a layout that's appropriate for mobile devices when the browser is small like this.
8. How to make a responsive version of the CSS Grid project.: Okay, welcome back to Introduction to CSS Grid. In this video, we'll be looking at how we can make our grid layout responsive.Which is to say, how can we make it display nicely in both desktop and mobile browsers?What are we going to look at right now? We are going to see how we can use CSS media queries, and the grid template areas CSS rule together to show different layouts in different sized browsers.How are we going to do that?Well, what we do is we redefine our grid template columns and grid template areas, CSS rules so that we basically only have one column and then we lay out all of our different areas, one on top of the other, which is pretty close to the normal way things are laid out anyway. But this is a way that we can use our grid template to rearrange our items when the browser is larger or smaller.Here we are in our code and I'm going to poke right down the bottom and create a media query.Let's say 600 pixels. That can be our right point and now what I'm going to do is set up our CSS to default to a mobile display and then when our browser has a maximum size greater than 600 pixels, then we can have a desktop layout.I'll take out desktop layout and I will grab that and put that down there,we want that to be in the main element. This is for desktop and just put a little comment in there.You remember.Fine and then we go back up to our grid template columns and grid template areas and say, well, we only want one column now thanks just like that and then we'll say we have our header. Then we'll have our portfolio navigation, then we will have our portfolio-item and then we'll have our site-nav at the bottom. Let's see how that looks in our browser. I'll give our browser a reload and we can see that we're still displaying pretty much in the way we'd expect for our desktop layout and as I make this smaller, you can see it switches around and we can see our portfolio is at the top. We've got our landscape, portraiture, studio, and commercial links sitting there.Then now we've got our site-nav down the bottom. I think this text is a little small for a mobile device so I will fix that right now. I'm going to change our font size to two units of the view width.Let's put that in our media query, back to one there and I think I want our header to be centered for a mobile.I think we'll say center and then we'll go down here and we'll pop that in there.For our desktop, we still have our one, two, three columns.We got a header spanning the first row and we've got our portfolio-nav and portfolio-item and the portfolio-nav spanning down to the third row and then our site navigation, and then we've said our header would be aligned to the right and we'll have a smaller font size. But outside of the desktop definitions. We've got one column, sorry, and then each element sitting in its own row and we've centered everything.Let's see how that looks in our browser and now I'll reload that and we're done. We've got larger text for our mobile layout now but we've got everything fitting in there nicely and it doesn't look too squashy.Of course when we expand back out again, everything goes back to the way we originally designed it. That's how we can implement a portfolio web page using CSS grid.
9. Wrapping up our Intro to CSS Grid: Well, that's the end of our introduction to CSS grid. I really hope you've enjoyed it and found it useful as well. During this class, we've learned what CSS Grid is, how we can use it to define rows and columns in a web layout, how we can position content inside our rows and columns and finally, how we can make our layout look great on desktop and mobile devices. Now, if you haven't already, now would be a great time to post your project to the projects gallery. This is a great way to get feedback and also to show off your amazing work to the other students. Once again, I really hope you found this class useful and enjoyed it and I look forward to seeing you next time.
Luke Fabish, Let's get coding!!
