1. Introduction

1.1 Welcome

Hello, and welcome to an Envato Tuts+ course. I'm Adi Purdila, and in this course, I'll show you how to use CSS Grid Layout's more advanced features. Now, please be aware that before watching this course, you should be familiar with the basics of CSS Grid Layout. Please check out the lesson notes for a link to an introduction course. Now, assuming you know the basics, here's what you're going to learn in this course. First, you'll learn about the implicit grid and how it's different from the explicit one. Then it's all about alignment, and grid has some amazing options for aligning items in tracks and we'll take a look at those. In the third lesson, you learned about grid-template-areas, and how you can use them to quickly build layouts. Lesson number four is about naming grid lines, and positioning items on these. After that, you'll learn about minmax, an amazing function that truly enhances the CSS. And finally, lesson six will be about auto-filling and auto-fitting tracks. So without further ado, let's jump in to lesson number one where we talk about implicit versus explicit grids. See you there.

2. CSS Grid Layout

2.1 Working With the Implicit Grid

Implicit grid versus explicit grid, what is that all about? Well, here's an example of an explicit grid. It's called like that because we're explicitly setting the grid by creating a fixed number of columns and rows. So we're explicitly setting its structure. To understand what an implicit grid is let's take a look at the following example. Here, I have a demo grid that I've set up and I have six grid items. And inside my grid container, I'm defining two columns and one row. Now despite the fact that I only defined one row, the grid displays my grid item in three rows. Now these are the two rows were created automatically and they're called implicit rows. So here's what happens. If there are more grid items than there are grid cells, the grid container will generate new tracks to accommodate those extra items, and it does that by adding more grid lines. And these new tracks, in our case, rows are called implicit tracks. And along with the explicit grid that we define here form what we now call the implicit grid. And this is the default behavior. The browser sees that we have more items than we could fit in our explicit grids so it automatically creates new rows to fit those items. Now if we want to create implicit columns instead of rows we can use something that's called a grid auto flow. So I'm gonna do that right now, I'm gonna say grid-auto-flow and i'm gonna sit this to column instead of a row. And then watch what happens. Now we have those two explicit columns that we created here, 1fr 1fr, so 1fr 1fr that stands for columns 1 and 2. And the rest of the items were added automatically as tracks by the grid container. These are 3, 4, 5, 6, these are the implicit tracks that were created. But because I set grid-auto-flow to column, they were created as columns instead of rows. Now, what's up with these sizes? Well, by default the widths and heights of the implicit tracks are set automatically to fit the grid items. So if I had a longer content here, right? This track will be resized automatically to fit its content. Same goes for all of these. However, we do have a way to explicitly set the dimensions of those tracks. And we can do that with the following properties, grid-auto-columns, lets set 1fr. Now grid-auto-columns will target specifically those implicit tracks where those implicit columns that were created by the grid. So in our case we have the explicit grid creating the initial columns at 1fr 1fr, so that's 1 and 2. And now we're telling create the implicit ones at 1fr as well. But I can do this, like I can say 2fr, right? So now 3, 4, 5, 6, which are the implicit tracks will have 2fr sizes instead of 1fr. And I can do the same for rows, so I can say grid-auto-rows. I can set these two, let's say for example, 100 pixels. Now currently you don't see anything because the auto flow is set to column, but if we uncheck that. If we comment that, you'll see that the implicit tracks that were created by the grid now have 100 pixel heights. And that's it for explicit versus implicit grids. I hope I explained well enough so you can understand, but just in case let's do the recap. So when you have more grid items then you have grid cells, the grid container will automatically create new tracks to accommodate for those extra items. Those new tracks are called implicit, okay? And the implicit tracks, along with the explicit grid forms the implicit grid. You can change what kind of tracks are being created, so rows or columns, by using the grid-auto-flow property, by default it's rows. And it can also use the grid-auto-column in grid-auto-rows properties to define the sizes of those implicit tracks. So I hope that makes it a little bit clearer. Now in the next lesson we're gonna talk about how to align grid tracks and grid items. That's coming up in the next lesson. See you there.