Intrinsic Grids

[00:00:00]
>> Kevin Powell: Now we get to the fun part though, intrinsic grids. I like to say that grid is intrinsic by default because if you add content to a grid, you display grid, put a gap, don't create any columns, and you're adding content to it, it's kind of intrinsic, it adds new rows by itself. We don't have to tell it to create those rows. It's doing that all on its own. The browser's figuring that out for us. Not really what we mean by layouts, but it still is a responsive or intrinsic pattern in a sense.

[00:00:30]
But most of the time, or generally speaking, that's not what we mean. And to make what you meet what we would call an intrinsic layout with grid is going to be the longest CSS declaration you'll probably write. It's one that looks very strange, and I'm going to repeat it over and over again until I hammer it into your head. I said at the very beginning of this course, we're not going to be memorizing anything, no property-value pairs.

[00:00:56]
This is the one value that I hopefully can get you to memorize, because it is strange, but it's just so useful. And so we're going to start with a grid-template-columns. Let's start with a really simple one. Repeat 4, we'll do 1fr for now. We get 4 columns. Okay. The problem here is this is getting smaller, they get really, really tiny. We could do a media query like we saw before. But when do we put the media query in?

[00:01:26]
How do we decide how many columns we want, all these different questions come up. So, as a reminder, we don't have to even say 1fr here, we could say a specific value, say 100% or 100 pixels. Now it's always 100 pixels. Now that's terrible, we don't want that. Let's make it 200, that's actually really small. And we can see it's 4 columns of that and it just stays there. Now wouldn't it be cool if we could say, I don't want 4 columns.

[00:01:58]
I want however many columns can fit that are 200 pixels. That we can do. Instead of saying a number here, we use auto-fit. There is a second word here that you'll see which is auto-fill, we'll talk more about that later. So auto-fit, all of a sudden, it automatically fits, we have an automatic amount of columns. The browser's figuring out how many columns we have, as long as each column is 200. Pretty good, not great, because it's kind of weird that we have like this empty space over here.

[00:02:30]
It'd be really nice if this 200, instead of being 200, was more like those constraints we were setting before. I want that to be the smallest you can get, but you should be allowed to get bigger because it's kind of awkward if there's available space. And we can do that. We can use a minmax function for this. Another new thing for grid. Minmax is unique to grid, just like the fr unit. Minmax takes two different sizes.

[00:02:56]
The name's pretty straightforward, a minimum and a maximum. So let's stick with the minimum that we had before, 200 pixels. I'm going to put a comma, and then I have to choose the maximum size that I want. We've already seen with grid, we have a unit that works really well for maximum sizes, makes things squishy, the 1fr. And by doing that, at the small sizes, it's good, and then all of a sudden we get an intrinsic grid.

[00:03:25]
It's really nice, it works well, it's a really long declaration that you have to get used to writing. Really fast on how the browser is figuring this out. It's basically just saying at this size, I can't fit two columns in that are 200 pixels wide each because that would cause it to overflow out the parent. So I'm just going to put one, and that means I'm allowed to grow up to this 1fr size, which is just fill the available space.

[00:03:48]
Then all of a sudden when we get past a certain point, it goes, oh, you know what, I can actually fit two of them in now that are that size. And then as it continues to grow, oh, we need a bit, I can't fit more, I can't fit more, so they're allowed to grow, and as soon as that next one can go in, it will squeeze that one in. It seems perfect, but there is one problem with it. People always run into this later on.

[00:04:10]
They learn this and then they run into the problem with it and they think they can't use it anymore. Maybe 200 is kind of small. You need it to be 400. When we're at 400, it works just as well. We're only probably going to get two columns at my current screen size, but it works just as well until you get to that minimum of 400. A lot of devices are below 400 pixels wide. And then we have horizontal scrolling, because we've hit a minimum that we told it to 400.

[00:04:36]
This would like be saying min-width 400 pixels on a regular element. And I said never set minimum sizes on stuff very early on, because this is the type of thing that could happen. There is a fix for this as well. Every layer of this, we just layer something deeper inside to fix it. I always feel bad teaching this part to beginners just because we're getting pretty far in, but it's such a useful pattern I have to teach it.

[00:05:05]
So here, I'd like this to be the, this is sort of the smallest I want a column to get, unless the parent is smaller than that size, and then I'd like it to continue getting smaller. So we can do that with another new thing. Now this other new thing is not unique to grid. You can use this anywhere you want. Oops, I shouldn't have done that yet. I should have written min. Min can take as many values as you want.

[00:05:32]
There's a few different math functions. This is one of the math functions. You can put in like 20 different values in here, and the browser will always take the smallest one. So very simply, if I said min 400, 200, it's going to always pick 200 as the size because 200 is always smaller than 400. There's no computation for the browser to do, it's very straightforward. Where it becomes more interesting is when you mix different types of units here, because the browser can compare the two different values next to each other in real time as depending on the space that's available.

[00:06:07]
So here, I am going to put 100%. It's a long declaration, the longest one you're going to write, the most confusing one you might see. But now, when we get smaller than 400 pixels, 100% is the size of this grid. The width of the grid. So if the parent is smaller than 400 pixels, it switches from using this one as its smallest to the width of the parent as the smallest, and that just means things can shrink down to as small as the parent is getting.

[00:06:35]
There's 2 problems, well, not a problem, it works. So there's not really a problem with it. But the readability of it starts getting a little bit hard. This is where we make it even longer, but we make it a lot more readable. I'm going to come up to the top and I'm going to use a locally scoped custom property. I wouldn't bother putting this in the root of my project because it would be unique to this grid that I'm creating right here, and I could say something like min-column-size.

[00:07:04]
We'll come in with, we said 400 pixels before. I'm going to break this off onto a new line. You can do this with declarations, they don't have to go. It's always colon, declaration, semicolon, breaks it up, so it just makes it a bit easier to read with really long ones. And then I can replace this with my var. Whoops, we gotta do it right. Var min-column-size. I'm going to hammer this home. We're going to see other examples.

[00:07:33]
We're going to retype this. I'm going to show you the easy way to remember this, maybe not the easy way, but the way I remember it, just because you have lots of closing quotations and everything else. But if you were the want, you could just copy this down somewhere in your computer and just have this that you reference back to you, because you don't actually have to ever change this code. It's always going to work.

[00:08:00]
It's always going to be the same thing, and the only value that will ever change is this up here. And there it's working there. And then if I change that to 300, then it changes to 300. So, as I said, a long declaration, a bit ridiculous looking, when usually things in CSS are very short, but it works so well and it's such a common pattern that I use all the time. I really wanted to show it within this course.

[00:08:26]
Really fast, the way I would write this, if I was just doing it off the top of my head, like writing it out, and I do mix up my parentheses sometimes when I'm doing it. But I do a grid-template-columns. And I don't put any values in to start. I do a repeat, auto-fit, comma, minmax. I know I need a min function or a min size and a max size. Min size means min function, so I do my min, comma, and then I can start bringing in my different units.

[00:08:57]
So in the min, I can put in a size or I can put my custom property, let's just say 200 pixels, and then it's always 100% here, and after the comma, it is always 1fr. This is the only part of this that will ever change. So, repeat, auto-fit, minmax, min, and then you just figure out the pieces where they have to go. I know it can be a little bit strange. Before I move on, is there any questions on that one?

[00:09:28]
I'll let chat come in if there's anything, so I'll wait a second before I move on. Can you do a thing like a calc with the media query that makes this shorter, or it probably even makes it longer, right? You could do within, you could do calcs on any of this if you wanted to. Media queries, you can technically put calcs within media queries. But there's some. Yeah, there's use cases for that too, but the one downside of a media queries is we can't use a variable.

[00:09:57]
So that does put a little bit of a problem on them, yeah. I guess could you take because yeah, I'm like I'm not going to remember repeat auto-fit all that stuff and I'm like, I'll make it a snippet, whatever. Could you make the value would it be the whatever the second part like everything in the repeat could you make that a custom like could you make that a custom property too? And then so anytime you need to call it, you say grid-template-columns var dash dash for sure.

[00:10:29]
So you could do this. Yeah, that's not a, I never thought of doing that. But yeah, you could have. Brutal like utility, custom property or something like, responsive or we'll call it intrinsic grid or auto, we'll say auto, intrinsic is a bit long, auto-grid. You could bring that in, and even this could be the variable still. Your min-column-size. If I was doing, I'd probably put a default value here.

[00:10:54]
We haven't talked about that. So this is making things a little bit more complicated. But it's essentially saying that if you can't find a min-column-size, then use this instead. So we've made it even longer, but then we should be able to come down here. Let's delete this. We'll make sure this is working. But then you could come here and just say this is your var auto-grid. And if I didn't do anything wrong, yeah, it works.

[00:11:29]
So yeah, that would definitely make the declarations here and then each one you could customize. So you want it to be 500, it should update. Oh, no, that fallback won't work. That's one of the limitations of custom properties. You'd have to have you could have it declared within here. The reason the fallback isn't working is because the auto-grid, it goes to where the auto-grid is defined. Oh sure, and then where the auto-grid is being defined, there is no min-column-size, so it doesn't actually see this.

[00:12:02]
Oh yeah, yep. So that's why, yeah, I guess you take which one is more beneficial. Yeah. Yeah, and you could, I guess you could technically create different auto like auto-grid-500, 300, sure, depends on what you want to do, or bring in another preprocessor or bring in a preprocessor, yeah. That's a cool idea though. I tend to just have my an auto-grid class when I'm using this, and I always have the same setups here, and then I can always manipulate the custom, like if I'm reusing it somewhere else, I could change the custom property where I'm using it to suit the needs in the different places.

[00:12:36]
Because yeah, it is a hard one to remember, but it's such a useful snippet that it's definitely worth understanding. And just for reference, if anybody doesn't like it is in the course, you can just copy, or it's even here with the custom property. So if you want to grab it from here and you haven't typed it out, you can get it from the course lesson. Yeah, that's probably out of scope for this section, but.

[00:13:02]
Do we think we could do that with like a CSS function? I know that stuff is CSS function, yeah, so CSS functions are coming definitely out of scope for this. They're not here yet. We're also getting mixins. Functions are closer. Because then you could like pass in your minimum size. Yeah, because functions return a value. So yeah, it would work with a function because you'd have the entire thing returning the function and within the function you just set your minimum size, that would definitely work, yeah.