CSS Grid: Limit Item Size Using the minmax Function---- i need help

CSS Grid: Limit Item Size Using the minmax Function---- i need help
0

#1

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.

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.

.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
/* change the code below this line */

grid-template-columns: repeat(3, 1fr);

/* change the code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;

}


#2

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.

This is your code to be changed and the instruction says,

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

SYNTAX: repeat(3, function) function refers to minmax with two parametes


#3

you need to keep the repeat function as it is…and add the minmax function inside the repeat function.

eg:
grid-template-columns: repeat(3,minmax(90px, 1fr));


#4

Thanks sir, I had the same prob and I came up almost with this solution. Glad I double checked and saw your response. Thumbs up! :slight_smile: