Responsive Cards Columns with Grid

[00:00:00]
>> Kevin Powell: So when I see something like this, what I always want to go to first is creating a grid, obviously. But with grid, we have two different functions or features, I should say, we can use, which are auto fit and auto fill. And so here I have this grid of mushrooms, the parent of all of those cards.

[00:00:19]
I'm gonna give it a class and I just tend to call this grid autofit or autofill, depending on which one I'm using. If you don't know which one to decide between coz you have the two choices, it's a lot like margin and padding. Try one. If it's the wrong one, try the other one.

[00:00:34]
But I find 99% of the time, autofit is what I actually want. And I'll explain the difference a little bit shortly, but I'm gonna do just a grid-auto-fit. I'm not calling this mushroom guide, cuz again, potentially, I'm doing something very generic here. This is just a layout that's gonna have a whole bunch of cards that are going in it that I could potentially reuse somewhere else if I ever needed to.

[00:00:55]
And if I gave it the class name mushroom-guide, then I'm stuck having that as my mushroom guide. And then I'd have another grid, essentially the same later on. We don't need it in this case, but I'm always trying to think ahead, is this a generic layout, or is this very specific?

[00:01:08]
Which our next grid will be, where we have the bento layout, where the pieces all have to be specifically arranged. In a situation like that, you have a bit of a different story, but here where it's just a generic looking layout that has specific content in it, always try and separate the idea of what the content is versus the layout that it's living inside of.

[00:01:28]
So I mentioned that is going to be a layout. So we can do a layer of layout and find our layer there, and I can collapse these ones down. And in there, the way I organize this is a little bit like I have my grid flow, I have equal columns, sections, wrapper, and I don't know, you can just put it at the bottom.

[00:01:50]
I have the grid in equal columns. I sort of see it as being in the same realm of that type of layout, so I'm gonna throw it in right here. But if you prefer organizing it somewhere else you can. And so grid auto fit, and that means display grid gap, probably one rem, 16 pixels, in that range.

[00:02:15]
Let's go take a look at what that's done, and my mobile layouts done. So that's awesome. Because the way grid works, the first thing they may think of now is well, I should just put a media query in and create the columns. Grid auto-fit, the reason I like it, it's one of those intrinsic layouts where I don't have to worry about what the break point is.

[00:02:32]
I just give it some information and it figures out the layout for me and it makes it work across the board. I think one reason people have hesitancy towards using Grid is because there's a lot of new pieces with it. And you get grid template columns is such a long declaration that it can be a bit funny.

[00:02:50]
But we have grid template columns, and just because this is gonna be a long declaration, I'm putting this on a separate line, you do not have to. And when I save, Prettier will probably put it all on one line for me. And grid templates not with an s, template columns like that.

[00:03:06]
I knew there was a typo just cuz the color gray that was coming on it when I spelled it correctly, the syntax highlighting was working. With my grid template columns, we're going to do the repeat syntax. So the repeat syntax, I could do a 3 and then 1fr, fr is just use the available space and it would give me three columns.

[00:03:25]
Cool, but then it's always three columns and then I need media queries to change it and all of that. So instead of putting specific numbers here, as I said, we have auto-fit or auto-fill. We'll explore both of them, but for now we'll explore this, and again, I want this on a separate line, just so we can see everything.

[00:03:44]
And with the auto -fill, again, there's another new thing you need, which is the min-max, which is a CSS grid-only thing. So again, I think that's one of the reasons sometimes people have hesitancy towards grid, is because there's a lot of unique pieces to it, and they're different from other things.

[00:03:59]
But this one pattern you could just reuse on every website you create, and you'll find good use cases for it. So with the auto-fit, it's going to automatically figure out what to do based on the information we put on our min-max. So for now, I'm going to write 300 pixels, 1fr.

[00:04:17]
In general, if you're using an auto-fit or an auto-fill in the minmax, this value will almost every single time be 1fr, cuz that just means take up the available space. The maximum size it has is fill up as much space as you can. And this is the minimum size here, so the smallest that column can be is 300 pixels.

[00:04:38]
We get zero columns and I might have made it. Oops, there we go. Now we go up to two columns and the browser, as I said, it's an intrinsic layout, so as soon as it can fit two columns, it adds two columns that are 300 pixels, and then we get to a larger size.

[00:04:52]
It goes, I can fit three columns now at 300 pixels, and so on and so forth. It add as many as it can depending on the size of the space available to it. So very handy. There is one problem with grid auto-fit is the minimum size here potentially could cause overflow.

[00:05:10]
So I'm gonna exaggerate by making it 600, you probably wouldn't do this, but if you go smaller than that size, those columns are 600 pixels. You just said that's the smallest they can be. So you end up with some horizontal scrolling if the viewport gets smaller than that size.

[00:05:27]
Or if you're using this in a layout where it's a sidebar plus the main, it can start spilling out the side at narrower sizes and stuff like that. The way to overcome this looks really funny, where you put this inside of a min function, and the second value in the min function is 100%.

[00:05:46]
And I'll full screen that first so you can see the whole thing. And so we're doing a minimum size that is either 600 pixels or 100%. Which just means that if the parent's size is below 600 pixels, it's going to use this 100% here instead of using the 600 pixels.

[00:06:04]
It's choose the smaller between these two values. It looks a little bit strange in setting it up like this, you have a min-max with a min nested inside of it, but it's the best way to do it. And if we come take a look now, we've solved that overflow problem that we had before.

[00:06:18]
So I always recommend doing the min with the 100% even if you're putting a small number here, even if the declaration looks a little bit weird. And the one problem with this is, if you need to come in and change this, you're sort of diving through and it's a bit hard to read and look at.

[00:06:33]
So this makes the declaration even longer. So we'll full screen it again. But I do like coming on this and doing this as a custom property, and doing bar say, auto-fit, min call size. And it could be a much shorter one, if you want it to be, but I put that here, and then you could have that here and say that it's your, I don't know.

[00:06:56]
Oops, say that that's 250 pixels or whatever you need it to be. By having it as a custom property, it makes it easier to adapt if you were using it in different situations as well. So you could have one grid set up one way, another grid set up another way, and just change that minimum column size.

[00:07:14]
And then when you are changing it, you're not hunting it down in this giant declaration. You're just coming and finding this one piece of code that you need to come and change here. And the nice thing with custom properties is you can describe exactly what that number is.

[00:07:25]
So auto-fit min column size, I think you could call it again just min column size, and that would be completely fine. It's still very readable. In the off chance that you have a minimum column size for something else, I always like prefixing them with something just to make sure that I don't accidentally overwrite it with some other custom property coming from somewhere else.

[00:07:45]
So I always have kind of verbose names for my custom properties that are locally scoped. So with that done, whoops, it's on the screen. If we go and take a look, it works. Let's highlight you. And then as it gets bigger, we got up to two columns. As it gets bigger, we got up to three.

[00:08:06]
And then well probably at my screen size right now, we're not getting to four, but you'd get to four columns as well, I believe. And as far as what, I chose 250 just because, again, I'm looking at it, and I'm like, yeah, that seems like the right space for it to switch over.

[00:08:20]
It's getting pretty narrow, I wouldn't want it to get smaller than that. If you feel like maybe you want 275, maybe you want 200, you just sort of eyeball it. If you are working with a designer, you also prototype this, show it to them and say, do I tweak this or is it good or not?

[00:08:35]
If you are working with a designer on something, it's really good to have those open lanes of communication to make these decisions if you don't feel comfortable doing so.