Use the minmax function to specify dynamically-sized tracks
Using minmax() is an amazingly useful way to specify boundaries for the smallest and largest size a grid track can be. Let’s find out how to apply it.
[00:00] We have some mockup consisting of a container with two divs inside. Our container is display: grid with a 30px gap and taking up all the available height. Our grid items have a background-color. We want each of our divs to have their own column, so we're going to go down and set up some grid-template-columns. Let's say we wanted each one to be 100px wide. Now we have two 100px columns.
[00:25] Or we could also specify the minimum and maximum width of our columns using the minmax() function. Let's say we wanted them to be 100px at the very least and taking up all the available space at the most. We could say minmax(100px, auto) for the first column and the same for the second column. Now the columns take up all the available space, but they'll never get smaller than 100px.
[00:58] We could use a range of different width values in our minmax() functions. We could say that our first column should never be bigger than 200px. Now our second column is taking up the available space. We could use percentage values too. Now our first column never takes up less than 10 percent of the viewport.
[01:24] We could also use a flex value using the fr unit. We could say that our first column's max is 1fr and our second column's max is 4fr. Now they scale. Finally, we could use min-content and max-content. With this example, we've got some placeholder text in each of our columns. As we get further and further down on a small screen, we see some overflow in our first column.
[01:54] We could specify min-content as our minimum value in minmax(). Now we have no overflow because the minimum value is however much space is being taken up, in this case, by our text. If we were to use max-content, in this case the width of the div would be defined by however long the text is without it wrapping.