One incredibly useful new feature introduced with the CSS Grid Layout Specification is the
minmax()function. This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value.
Using minmax() – combined with repeat() – it’s possible to create responsive grid designs without the use of any media queries.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}