freeCodeCamp/guide/english/certifications/responsive-web-design/css-grid/limit-item-size-using-the-m.../index.md

1.3 KiB

title
Limit Item Size Using the minmax Function

Using the minmax function in conjunction with the repeat function is exactly what this challenge describes, but this was not inherently obvious to me at first. The way to pass this challenge is to remove the max-width value within the repeat function, and then add the minmax function in place of the repeat max-width value.

Here is an example of what that looks like using a before and after approach:

Before

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

After

    grid-template-columns: repeat(3, minmax(50px, 2fr));

You may also check this embedded pen on Codepen to see the example in action, which you can resize to view the results:

See the Pen limit-item-size-using-the-minmax-function by skywardcode (@skywardcode) on CodePen.

Resources

Mozilla Developer Network