0:00 In this video, we'll take a look at another example of grid-based layout that we can build. This one is a card layout, but it's not just any card layout.

0:08 Some of our cards are double height. They span two rows, as you can see here. It's responsive and that it resizes and reorders the grid as the screen changes or at least as the container size changes, but this is not done with media queries. This is done using Autofill with the repeat function. It's quite simple to create. We'll be able to do it in a single video.

0:34 This is what I'm going to be starting with, which is a container that has all of my cards. It has my header in it and my footer, but there's no grid at all at the moment. Everything is a block element. There's some basic styles. You can see everything inside of...I'll show you the markup.

0:52 We have a container, a div with a class of container, a header, and a footer, and then 10 cards. Each card is a div with a class of card, and two of them have the class of tall-card, which doesn't do anything right now.

1:06 I wrote some styles so that everything in the container has a border radius, some padding, it has a different font size. I've assigned some background colors to make the header and footer purple, to make the cards this grayish, I guess that's a gray color.

1:21 The first step here, if I'm trying to recreate this layout, is to enable grid. That's simple enough. On the container, I'll set display to be grid. Don't really see much of a difference yet.

1:34 Now, we need to define our columns and/or rows. I'm going to do a grid-template-columns, and I'm going to use repeat with (autofill). Instead of setting exactly how many columns I want, I'm going to let the browser decide based on this minmax where each column is a minimum of 200px up to 1fr.

2:00 Let's see what that does for us. Already, it's changed things quite a bit. As you can see here, it's reordering and it's going from a two column to three to four. That's a start.

2:13 I do want to add in some row dimensions. These are too short, if we look at the original. These rows are 150px tall at a minimum. I could try using grid-template-rows, and say that there's a 150px row, for example, but that's only going to work for the first row.

2:35 Then I could say there's another 150px row, but that will only work for the first two. I want this to work no matter how many cards I have in here, even if I have double the number of cards. I'm not going to hard-code the number of rows like this. I'm going to use grid-auto-rows.

2:52 Remember that this is the property that says for any implicit automatically created rows, they should be, in our case 150px tall. That will work if we compare them. There's a grid gap in here, which we can quickly add in.

3:08 Let's do grid-gap of 20px. Ignoring the layout, things are a little different. The dimensions of these rows look good. However, I've now said every row is exactly 150px. This is not great, if I have content in these cards.

3:29 For example, let's say one of these cards is full of text. It's overflowing this card. I have choices. Of course, I could decide, "Well, I don't want this to grow at all and I want to hide the overflow." Maybe that's what I want or what I can do instead is set grid-auto-rows to use minmax.

3:51 I can say a minimum of 150px and then I can use the auto keyword. Which in this case, if I use auto for the maximum of minmax, it means that the row can grow up to the height of the content itself, automatically grow.

4:07 Don't take up any more space than you need, but you can grow up to the amount of space that the content dictates. As you can see here, this row has now grown to accommodate this content. It's a little odd to have all that content in one card and nothing in the others, but it does demonstrate how this works.

4:24 If I get rid of that content, here we are, they go down to 150px tall for each row. They'll grow to accommodate any extra content, but they're not going to grow otherwise. That's our basic setup here. As I shrink this down, it's already responsive, because we're using auto fill.

4:46 Next, what we'll do is work on the header and footer. I want those to be full width across all of the columns. The tricky thing is I can't necessarily have them span, in this case four columns, because there's not always four columns.

5:01 I could start with that. I have my header and footer right here. I can set grid-column or grid-column-end or any of those variants to be something like span four. That will work here.

5:16 Then when it goes to a three-column layout, things get broken. It doesn't behave the way I want it to work. Because we're using auto fill, the number of columns is changing. What I can do instead is not hard-code exactly how many tracks or columns I want it to span.

5:34 I can use the line numbers and say I want you to start at column line one and end at column line negative one. This just means go from the beginning to the end. The very last line will have a number of negative one. Even if there's 20 columns, this will span all of them. If there's two, this will span two.

5:58 As I shrink this down, you can see that it's working. The header and footer span all the way across the grid, whether it's a two column, three or four column grid. If it grew past that, the header and footer would span five or six or seven columns.

6:15 Now, what about making these tall-cards? Some of these cards have a class, as you can see right here of tall-card. If I want them to be tall and span two rows, it's very simple. If I select that class, which is tall-card, all I have to do is set their grid-row to be span two.

6:39 I want them to span two rows. There we are, that's it. They span two of those rows automatically. Well, not automatically, I told them to span two, but there's nothing else we have to do. You can see, it's still looks good. Still looks good. We still have our auto fill with repeat, where the number of columns is changing from four to three to two.

7:07 These tall-cards always take up two rows. The rows are always a minimum of 150px. Let me show you, if I double the number of cards, add a whole bunch more in, everything still works great, as you can see here.

7:26 That's thanks to the fact that we're using grid-auto-rows instead of grid-template-rows. By using auto-rows, we're specifying the dimensions of the automatically created rows.

7:35 That's a slightly more complex layout, a card-based layout where we didn't have to write a single media query. It still looks good on different screen sizes.