Learn CSS Grid by example

1. Class Intro: [MUSIC] Hi, there. Again, welcome. I am Daniel and I have been doing with the Mellow One for more than 15 years now. This is my course about learning CSS Grid by example. CSS Grid alongside plague box has simplified the latter way we are generating page layout. The scope of this course is to give you the needed knowledge to use CSS Grid in your web pages and interfaces. I will do this by building a few little examples. We'll start. We have some simple stuff like how to set up a basic grid, how to define its elements, or how to place elements inside of sets. After that, we'll gradually advance to different ways of how we can make our grids responsive, how to combine the CSS Grid with other layout managers like Flexbox and Mode. We'll do a lot of coding in the scores and each lesson has its exercise files and solutions to all code. I look forward to seeing you at the next lesson where we will start in building on for CSS Grid project. [MUSIC] 2. Example 1 - Project Introduction: Hello and welcome. This is what we will build in this first example of the CSS Grid course. First, we will see how to set up a basic grid, how it works, how we'll define the rows and columns, and how we will define the sizes. Speaking of sizes, we will see a really nice feature of CSS Grid called minmax that will let us build responsive layouts without using media queries. Yeah, you heard that right. This layout changes based on the dimensions of the viewport, but it doesn't use any media query. Also, we will see how to manually position items in cells or how to make them span across multiple cells. Let's see what we have in the starting files for this example. Each lesson has its own folder containing a starting file that you can work on, and the final file that you can check at the end of each episode. This is the point where we will start from. From lesson 1, start that HTML. The HTML structure is pretty simple. We have a big container called items-grid, and inside of this container, we have some divs with a class of item and h4 plus an image. There is also some basic CSS, just the background color, some borders and a max height for the image. The images are taken from this GOT folder called houses, and here you can see each image that it's used in the example. Both the CSS and the HTML are in the same file. But keep in mind that this is for educational purposes only. Don't do this in a real project. Let's get started and see how we can move from a structured layout like this one to this nice grid that we have here. 3. Example 1 - Basic grid setup: Let's make this container a CSS Grid. For this, I'll go into its corresponding CSS class, in this case, the items-grid, and I'll say here display grid. If we save and we'll refresh, we'll see that nothing happens for now. This is because we didn't define yet the columns or the rows of our grid. In order to define the columns, we'll use a new property called grid-template-columns. Let's say that initially, we want to set our cards on two columns, each of 200 pixels, I'll set a value of 200 pixels for the first column, and then after that, another value of 200 pixels for the second column. If I will save and I'll refresh, you'll see now that all cards are displayed in this nice format with two columns, each of 200 pixels. We can come at one more, let's say just for the sake of the example, and here I will add one more of 200 pixels and we will see now that all our cards are rearranged in this layout with three columns. One interesting thing to notice is the fact that we didn't define the number of rows. We didn't set anything about the number of rows. Mostly this is a common pattern because we mainly define just the number of columns and the browser will know to auto arrange the content based on that number of columns. Basically here we had in total 10 cards and they are auto arranged in a three-column layout with four rows, the first three rows have three items in them, and the last one has just one item. 4. Example 1 - The FR unit: We are not confined in this line to use only pixels. We can use any CSS measurement unit. We can use percentages, we can use rems, we can use viewport units, we can use anything. For example, I can come here and select all of these and say that okay, I want each column to be of three rems. If I refresh, we'll see now that we have this messed-up layout. But the idea is that we can add any type of units we want in there. But we will want to have all of our layout to expand as much as possible in this free space. Maybe one idea that we can think of is to use percentages. Maybe let's try to make everything in here of 33 percent and see how it goes. Things are looking much more organized right now. But still, if we take a closer look, we'll see that the space in here is not the same width as the space in here. Mostly this is because if we add everything in here, so 33 percent plus 33 percent plus 33 percent, we'll get 99 percent, so we will still have one percent free in here. We can come here again, use something like this to cover all of that space. But CSS grid also comes with a new measurement unit, and this unit is called the fraction, the fr. If you will take everything in here and we will replace it with one fr and we will refresh, we'll see now that we have exactly the same space on one side or the other. How this separate unit works, is that the browser takes all the available space. Then after that, divides that space into the total number of fr units that are needed. In this case, the total number of fr unit is three, 1 plus 1 plus 1. Each of the columns will go exactly on a third of the all available space. Now, for example, if we will take the center column, we will make it of three fr units and we will refresh, we will see a layout that looks like this. What's happening here is that the total number of fr units is five, 1 plus 3 plus 1. The browser took all the available space and divide it into five units. The first and the last column will go on one fr, meaning 20 percent of the space. Meanwhile, the center column will go on a three fr, in this case, 60 percent of the space. 5. Example 1 - Grid gap: If you look at our layout in this moment, there isn't any space between the cells of the grid. There will be cases where you will want to be able to control the space between the columns, so the space between the rows. In order to accomplish this, we can use multiple properties. The first one will be the grid row gap. Using it, we can set the space between the rows. I will say, I want to have 50 pixels space between the rows. We can also use the grid column gap. As you may imagine, this property, we control the space between the columns. If I will save and then refresh, we can see now that we have the 50-pixel space between the rows and the 10-pixel space between the columns. There is also a shorthand for the gaps of the rows and the columns. Instead of using two different properties, I can delete this and say I want to use a grid-gap. Initially, we can define the space between the rows, 50 pixels as it was before, and 10 pixels for the columns. Now, if we save we'll see that the output is exactly the same. The only difference is that we have used just one property instead of two different ones. Finally, if we want this space between the columns and between the rows to be equal we can just give it just one value of 10 pixels. Whenever we refresh, we will see that now there's is a constant 10-pixel difference between the rows and the columns of the grid. This is how you set the gap between the cells inside of our CSS grid. 6. Example 1 - Repeat function: Our layout in this moment only has three columns. But in the real world, you may encounter situations when you will need something like 12 column or even more. Let's make our layout to fit into five columns. Initially, this one seems quite simple. I will just add here two more columns of 1fr, and if we refresh you will see that everything looks as expected. But one downside is the fact that this line has started to become a bit harder to read. We need to count all the time how many files are in there again. So for situations like this, instead of writing multiple frs or multiple columns, what I can do is to come again and take these grid template columns and say that I want to have a repeat of five time and one fr. This line, it's exactly the same as this one. But if you look at them, the second one is a bit more easy to read. If I will delete this one and I will refresh, we'll see that the layout is exactly the same, but we got a line that's a bit more easy to read. The repeat function also has a cool trick. We can give it patterns instead of simple values. What I mean by that, let's say that we want all the time to have one column that is 2fr and after that followed by another column that is just 1fr, and after that, they repeat this pattern one more. What we can do here is to come and say that look, the first column needs to be of 2frs and after that, the next column needs to be of 1fr and repeat this pattern, 2 times. If I will save and refresh, we will see that we got this grid, the first column of 2fr after that one of 1fr, after that one of 2fr, and the last one is 1fr. Basically, it repeated this pattern two times. We can also give it patterns if we want to have it like this in our code. [BACKGROUND] 7. Example 1 - Using minmax: In this moment, even if our layout looks quite nice, it has a small problem. If we shrink the window, if we make the viewport smaller, you will see that at one point, our cards are getting cut. This is because they don't have enough space to fit in our five-column layout. Mostly this is because of this max height, set on image that will also trigger a minimum width that the card meets. What we want to try is to make columns that grow at a maximum of one fr, but will never, go under a specific width. Basically, what I am trying to say here is that we will use this minmax function that's a function introduced especially for CSS grid. We can define that one card will never go under 300 pixels and in its maximum size will go for one fr. If we save and refresh, we can still see some issues. Still our layout doesn't fit quite perfect, but at least now the cards are on a minimum width of 300 pixels. In order to correct also this horizontal scroll, what we will need to do is instead of saying that all the time, we're going to fit everything into five columns I will use another keyword introduced for CSS grid, and is auto-fit. This auto-fit is something like try to fit as many columns as possible. That will go for a maximum of one fr but never will come under 300 pixels. Now after we refresh the page, we can see that we have a nice layout of two columns that will not go under 300 pixels. If we make the screen bigger, you will see that the layout is trying to fit as many columns as possible with the assumption that will never go under 300 pixels. Using these two, the auto-fit and the minimax, we're basically building a responsive layout without using media queries. 8. Example 1 - Cell placement and span: By default the layout manager auto arranges the items in a CSS grid. But there are cases when you will want one item to have like a specific position, let's say this card the Lannister House to always come as the first item in our CSS grid. In order to accomplish this, I will add another class here called main. This class main will be set on the item that we want to come first. In order to specify the position of a specific item, we can use the grid column that I will say this item, I want to be placed on the first column. We can also use the grid row if we want to specify also the row. Now if we save, so take a look at this card. When we refresh, we will see that card is now placed on the first column and the first row. Even more, we can use these two, the grid columns and the grid row, to make that item span on multiple sales. If we want, let's say this one to make it bigger to span, also in this column and also in this row. What I will say here, I will come in and add a second parameter, telling it that, look, I want to start from column one and span it across two columns. I will do exactly the same thing with the raw. We'll save, we will see that now our initial card is spanned across two rows and two columns. And it will also play nicely if we resize the window. 9. Example 2 - Introduction and project description: Let's see what do we want to build in this example. We have layout for the homepage. Layout is going on the full height of the screen and is made of five sections. There is this main content section that initially is centered and takes the biggest part of the real estate of our screen. Alongside with four other secondary sections, we have left 1, left 2, right 1, and right 2. If we shrink the sizes of our window, this layout will change and it will go from three column layout into a two column layout. Let's see now what we have in the starting files for this example. We have two files, we have an index HTML and the style CSS. The index HTML just contains the minimum necessary markup in order to get this thing running. We have a div that is the general gap bug of our example and has a class of container. Inside it there are five other divs. Every div has a class like left 1, right 1, left 2, right 2. In the middle there is this main div containing the main section of our content. In the style that CSS, they're just some basic CSS properties that are giving this layer to just the background color for the general selected a few borders for our cells and the font family of sans serif. This is the code that we have in this starting files. Now let's see how we will move from a simple layout like this one to a nicely arranged content like we have here. 10. Example 2 -Defining the named template areas in a CSS Grid: The name template tag here are working by defining names for the sections in our design, and after that, assigning elements to those names. Let's see how we can emulate this final design. If we take a look at it, we'll see that we basically have five sections. We have two left and rights, and one main section. If we go here and we are able to take a better look at how the grid will look like, our names may be something like this. Initially, in here, I can name this is the template name A, this is template name B, C, D. The only thing that it's a bit more special is this central template name, that basically is made of two cells, both of them having the same name. In this case, I'll say it's X. With this in mind, I'll go back in my initial example, and in here, we'll first have to go in the "Container", and defined the fact that this is a grid. I'll say, "Display Grid". The next step will be to define the template areas. I'll say, "Grid Template Areas", and I will go adding one row at a time. Initially we said that we'll start with the section named A. After that we'll have this X. We'll go if Section B. Next, we'll have our second row with the name C, after that, X again, and finally D. Now if we refresh, the layout has changed a bit, but is not at all the thing that we want it. This is because we didn't assign the fact that this is Section A, this is Section B, this is Section X, and so on. For this, we'll use the grid area. I'll come here, again say, this is grid area named X, and after that, I will add four lines. I'll say here that L1 is Section A, R1 is Section B, L2 is Section C, and finally, R2 is Section D. Keep in mind that we have all of these classes already assigned to the components of our grid. This is L1, this is L2, and so on. Now, if we "Save", we'll see that we have a layout that is starting to look similar to the one we want to have in the end. 11. Example 2 - Setting the rows and columns sizes: If we take a look at the final example, we'll see that there are some differences to what we currently have in our working file. One difference is the fact that these columns, the left one and right one, are bigger to what we have here. The grid template areas can easily be combined with any other CSS property. In order to fix this width of the columns, I can come here and say grid-template-columns. I will say that for the first column I want a width of 200 pixels. For the next one, I want to take all the available space. In this case, I will say that I want one fr, and for the last one, I want to have again 200 pixels. If we save, we will see that now the width of our columns are exactly the same. Another difference to the final example is the fact that this one goes all the way up to the full height. One may be tempted to say that, if here things were solved with grid template columns, I can come and use the rows and I can say grid-template-rows. Given the fact that we have two rows that have to go all the way 50 percent, I will just say something like, the first row has to be on one fr and the second row has to be again on one fr. But this doesn't change anything in our layout. If we save, the result will be exactly the same. This is because we didn't express the fact that this container has to be told of 100 percent. We can come here and say that the height for our container is 100 percent of the viewport height. If we save, we'll see that our layout is now going all the way top to bottom. As a side note, we can even remove the grid template rows property. Because by default, our grid system, we'll look into the fact that it has two rows and by default it will assign one fr to each of them. Speaking of we can even remove all of these declarations and things will look exactly the same. Because how the grid layout is working is that when it has to place a new element, let us say this left one, it will place it in the first available space. After that, the next one will be placing the second available space and so on. But for now, we'll keep everything as it is for all of these left and right glasses because we will need them to have a better cortical when we implement the responsiveness part. 12. Example 2 - Centering items in CSS grid and using flexbox: The changes we have done in the previous lesson indeed did fix the issue with the sizes of the rows and the columns. But in our final example, the content is centered inside of a cell. You may know that this can be quite easy achieved with something like a display flex. Indeed, CSS grid can be combined with any other type of display. For example, if I go here inside of a div, and say that this has a display flex. After that, I will say that the justify-content is center and also align-items is still center. We save. We can now see that our content is nicely centered both horizontal and vertical, and this has been done with a display of flex. The moral of the story is that we can always combine CSS grid with any other type of display. 13. Example 2 - Responsive designs with CSS grid: One thing that I really like about the CSS grid is how much control it allows us to have when we are dealing with responsive design. Let's say our layout needs to be changed to something like this when the screen is low at 800 pixels. Well, of course for this, we'll need some type of media query. I will come here under the container and here at the media query and say that when our screen it's low at 800 pixels, for the container, I want to have some changes. If we look in the final example, what we see here is that, the left and right have moved in the top row after that, the main content is the second row and in the last row, we have the left 2 and the right 2. If we take a look at this grid-template area, this is describing how our layout is looking like. This is nice because what I can do here in the media query is just to override this. So I will say that our grid template area needs to be something like this. Initially, on the first row, we want to have a and b. After that, on the second row, needs to be filled with the x, and finally, in the last row will have c and d. If we save, we will see that some changes did take part, but still, the layout is not looking like we want it to look and this is because of this template columns that is saying to the layout that we have three columns and they have to be on specific sizes. But what we can easily do in our media query, is just to take this grid-template-columns and say that we want auto [inaudible]. This will display the layout exactly like we intend it in the final example. Even more so, let's say, for example, if we want to move this main content in the top, because I don't know this is the most important piece of all contents, we can easily achieve this by just taking this, go and put it in here. After that, if I will save, we will see that now we have the main content nicely presented in the topical of our page. As I said, this is one thing that I really love about the CS grid. The fact that after we defined all of these names, we can easily change all of the layout. We've just sample media query and the grid-template-areas property. 14. Example 2 - Leave an empty cell and naming conventions : Before we conclude this exercise, I would like to go through a few small details with named grid template areas. First of all, these names can be whatever words we want them to be. I have just used here just simple letters like a, b, c and so on, just in the idea to have a simple way of typing them. But for example, if I want to change this one to test, things will go as before. The only condition being that to use the name also in the corresponding class. Speaking about these names, the names are case sensitive. So for example, if here I will change from x to capital case X and I will save, we'll see that now our layout has gone upside down. The same thing happens if I will type x in quotations mark, as I will do for strings in a programming language. A common issue is with the fact that sometimes we want in our layout that one cell not to have any content inside it. So for example, I would like this Right 1 to be just an empty cell. A very common solution for this is to just replace the name b or whatever the name is for that cell with just a simple dot. But another thing that I would have to do with this is also to remove the actual content or otherwise things will break. One less thing, there are cases when we don't want the height of the layout to be the same as the height of our page. We just want, let us say these cells to be 150 pixels tall. So what I will do here is to remove this height of 100 viewport height. After that inside of a cell, I will come and say that this has the height of 150 pixels. If we save, now we may be confused by the fact that this main content is not going on the height of both Right 1 and Right 2. Even if here we said that we have x both in the first row and in the second row. But what is actually happening is that this height of 100 pixels has been applied also to the main content. But still our cell is going from one row to another.