---
id: 5a94fe4469fb03452672e460
title: Limit Item Size Using the minmax Function
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv'
---
## Description
There's another built-in function to use with grid-template-columns
and grid-template-rows
called minmax
. It's used to limit the size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item. Here is an example:
grid-template-columns: 100px minmax(50px, 200px);
In the code above, grid-template-columns
is set to create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.
## Instructions
Using the minmax
function, replace the 1fr
in the repeat
function with a column size that has the minimum width of 90px
and the maximum width of 1fr
, and resize the preview panel to see the effect.
## Tests
```yml
tests:
- text: container
class should have a grid-template-columns
property that is set to repeat 3 columns with the minimum width of 90px
and maximum width of 1fr
.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), 'container
class should have a grid-template-columns
property that is set to repeat 3 columns with the minimum width of 90px
and maximum width of 1fr
.');
```
## Challenge Seed
## Solution
```js
var code = ".container {grid-template-columns: repeat(3, minmax(90px, 1fr));}"
```