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

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;

}

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

1 Like

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));

1 Like

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:

:raising_hand_woman::+1: and always practice coding…like…you are writing a poetry…just keep calm and teach yourself the steps going on in the code while typing it down and speak it out at same time.
Eg: we create a css property for grid template columns…and give it a value to repeat three times horizontaly while being minimum width of 90 px or maximum width of 1 fr(1 fraction unit)…whichever width space available…
It will really help you.