Creating Responsive Grids 3 exercises
lesson

Combining minmax with repeat to Define Layouts

Another useful application of minmax is combining it with repeat.

For example, we can create a grid with three columns using repeat while setting a minimum and maximum width for each column using minmax:


#container {
/* other styles above */
display: grid;
grid-template-column

Loading lesson

Transcript

0:00 Another thing we can do with minmax is pass it to repeat. If I want three columns, I'll repeat three times, but instead of sending a hard-coded value like 400px, I can use minmax to set up a minimum and maximum range. I could do something like a minimum of 200px wide up to 500px wide, or even just 1fr.

0:26 What this says here is basically split the space evenly three times, three 1fr columns. However, don't allow those columns to go below 200px wide. Let me show you the difference here.

0:40 Right now, they're going to split the space. I have three boxes, three columns. They're 341px each, 500px each, but they will not go below 200px, as you can see right there. I've set a minimum.

0:53 Again, this is kind of janky having it overflow, but it is useful to have some minimum value often, because if I don't have a minimum value in here, if I instead just said repeat 1fr three times, now these columns could get really tiny, and they're going to overflow anyway because of the size of my content for the text, but maybe we want to have a lower bound.

1:16 That's one situation where minmax can be useful, and it's pretty common to use minmax as part of your repeat, where you define a single column with a minimum and maximum width, and you repeat that some number of times.