Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:41 minutes
Grid400 2
  • Overview
  • Transcript

2.5 Working With the minmax() Function

In the examples we’ve built so far, the grid tracks always had fixed sizes. They were always 1rem or 1fr or 25%. But in this age of responsive design, there are situations when you might need to set a minimum and a maximum size for a particular track.

Thankfully, we can do that with the minmax() function. So let’s see how it works.

Related Links

2.5 Working With the minmax() Function

In the examples we've made so far, every track size was fixed, basically. It was either one rem, one FR, 25%. So it always had this fixed value. But sometimes, you may want to set a track to be well, a minimum of this value and a maximum of that value. So I might want a column that's a minimum of 200 pixels and a maximum of 600 pixels. Well, thankfully, you can do that very easily with the minmax function. So let me show you this. We have a container here with a display of grid. And inside, I'm defining three columns, 1fr 1fr 1fr. And I have 10 grid items right here. This is the result, nothing out of the ordinary. New rows are created automatically to fit my extra grid items. Watch what happens if I do this. Instead of 1fr 1fr 1fr, let's say grid-template-columns: minmax. And minmax takes two parameters, the minimum value and the maximum value. So I'm gonna say 50 pixels, auto and then 1fr 1fr. So I basically replaced the first 1fr here with this bit, minmax(50px, auto). Now this function basically tells me this, have a minimum width of 50 pixels and a maximum of auto. So watch what happens when I resize, This bit. The first column always stays put at 50 pixels. But that's because I don't have content that's larger than 50 pixels. If I were to say on demo 1, for instance, let's add a br and let's say more content. That will resize. It will resize to fit the content. This is where the auto comes in. Auto basically means auto-size to fit whatever content is in there. So now if I resize, That first column will now resize as well, but it will always have a minimum of 50 pixel. Notice that it just stops there at 50 pixels. But when there's room and it can be resized, it will be resized. But only enough to fit its content, which is really, really cool. Now I can also specify fixed pixel value. So on the second column, I can say minmax, let's say 150 pixels, 300 pixels, all right? So now, my second track here will always have a minimum value of 150 pixels and a maximum of 300. If I resize this, notice my third track resizes, but my second one stays fixed. Now it's gonna start resizing. But only until it gets to 150 pixels. When it does, it doesn't resize anymore. And when I resize it back up, it resizes until it gets to 300 pixels, which is its maximum value. So that's how you can use the minmax function to define track sizes. Next up in the final lesson of this course, you'll learn about how to auto-fit and auto-fill tracks. That's coming up.

Back to the top
Continue watching with Elements