0:00 Next up, we're going to talk about the minmax() function, which is a function we use with grid when defining our rows and columns with grid-template-rows, grid-template-columns.

0:10 Imagine that I want to have a three-column layout. Maybe I'll just start with two columns to keep it even simpler, where each column instead of being hard coded as 200 pixels each, I have a range of between 200 and 400 pixels or between 400 and 500. That's where the minmax() function comes in.

0:29 Minmax() expects two values. The first value is the minimum, something like 200 pixels. The next value is the maximum. How about 500 pixels? This will define me a single column that ranges from 200 to 500 pixels wide. It will try to take up as much of this space as possible.

0:50 If we look at what I have right now, if I go to the computed tab, this box is 500 pixels wide. It takes up as much of this range as it possibly can. Now let's do two columns. minmax(200px, 500px) minmax(200px, 500px); Let me point out that I've changed the width of the container to scale now. It's a percentage based instead of being hard coded as 1000 pixels.

1:15 On a wide screen, like we have here, these are each going to be 500 pixels as you can see right here. 500 pixels. However, if I start to shrink this down, we run out of space. The columns start to shrink right. We're now 400 pixels, 200, 60 pixels, 220 pixels, 205. Once we hit 200, they will stop shrinking. Now they just overflow, which maybe it's not what we want.

1:42 We probably want to reorder things or go to a single column layout or something like, but it does show that these columns are ranging from 200 to 500 pixels. They're always try and take up the maximum that they can from this range. If there's not enough space, then they're going to be smaller than 500 pixels, but they will always be larger than 200 pixels.

2:03 That's a brief intro to minmax(), but there's more to cover.