0:00 Let's get to work on creating our three-column layout. The first thing we need to do is turn on grid, so display will be set to grid.

0:09 Then I need to work with grid-template-columns, and I want three equally sized columns. One easy way of doing that would be to repeat 1fr three times. That's not exactly what we're going for, because these will always be equally sized. I said that the middle column should have a minimum size of 300px.

0:29 Notice the difference here. This is the solution version, this is our version, they all shrink down at the same rate. It doesn't quite work to repeat 1fr three times.

0:40 Instead, what I'm going to do is use minmax. I'm going to have a one fraction column on either side, and then in the middle, I'm going to have a minmax column. This column will have a minimum size of 300px, a maximum of 1fr, as you can see here.

1:00 If there's enough space, it will be 1fr, 1fr, 1fr. If there's not enough space and we start to shrink things down, this column will not go below 300px. Now, this is our version here. They look the same, but then we start to shrink and our green one stops shrinking. It happens to be green, it's just the middle column. It won't go below 300px. It overflows the container, but that's a different problem.

1:29 This is about mixing regular just fractions with a minmax function to define a set of columns.