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