Define Size Range with the minmax() CSS Function to Create Responsive Grid Items

The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max.

Using the minmax() function, we can specify the width of our items and ensure that they remain between 200px and 1fr (the remaining space available). As the viewport is resized, the absolute value will change, but always within these two limits.

With auto-fit, the number of columns is defined automatically, ensuring a responsive layout.