CSS

minmax in grid

/* it act like  flex-wrap: wrap; in flex 
we don't need to define row and columns by using auto-fit
in below code items of grid take as much space as it have
but when they have smaller then 80px when window size reduce it items will palce below
*/
grid-template-columns:repeat(auto-fit,minmax(80px,1fr))

css grid minmax function

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

minmax in grid

/* <inflexible-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/* <fixed-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/* <inflexible-breadth>, <fixed-breadth> values */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)

grid minmax

grid-template-columns: minmax(20px, auto) 1fr 1fr;