You Should Know These 7 CSS Responsive Sizing Features

Key Takeaways

Did you know that CSS has both a fit content property and a fit content function and they actually behave differently? Or that the auto sizing property in CSS works differently for display and block level elements or even just how min, max, and fit content work together along with things like grid and clamping? All of that I'm going to be covering in this video. So, if you answered no to any of those questions, this is the perfect video for you. Welcome back to WebDevSimplified. My name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner. And to get started, I really briefly want to talk about how auto behaves slightly differently as well as what the min, max, and fit content properties do because understanding those is crucial to understanding everything else in this video. So, in this quick little example, you can see that I have an h1 tag that says this is title and then I have a paragraph tag with just some longer text inside of it. Now, by default, paragraph and h1 tags are both a display of block. And as you can see over here, right now our default width is auto. We could manually set that if we wanted to, but by default, uh pretty much every element in CSS has a width and a height of auto. So, you can see setting that does nothing. But the important thing to note is since we're using a block level element, no matter what, the width is always going to fill the full space of the container when you have it set to auto for a block level element. So, you can see that even though this is title is not long enough to fill the entire line, my gray background behind it still goes all the way to the very end of that line. Now, if I were to change my display property to be inline instead, if I come in here, I say display of inline, you'll now notice that essentially that gray background cuts off right at the very end of my text. I can move that up here as well and you'll notice that it makes it inline and that my background essentially just wraps around the text and nothing else. So, that's the slight difference here between inline and block with auto. You don't really notice it as much with this lorem ipsum text just because it's so long, but in the case of our h1 here, you can see it drastically changes how wide that actual width is going to be. Now, if I use inline-block, we can come in here and do that, and you can see when I save, it still gives me the exact same result as when I used inline, but now since it's an inline-block element, I can actually do things like set a margin on the top, for example, of like 20 pixels, and we'll see that show up. While with just normal inline, I couldn't do that. And if you're unsure of why that actually works, I have a full CSS video covering that, and I also have a full CSS course that goes in-depth into all these different concepts and so much more. So, if that interests you, I highly recommend you check it out. I'll link that course in the description, and the video on this CSS display property I'll link up in the cards for you. Now, this is the real quick primer on how auto works slightly differently. For the most part, it's not super important to understand. But now we want to talk about how fit-content, max-content, and min-content work. So, I'm going to come in here, remove this display property, we don't really need it, and instead of doing a width auto, I'm going to change my width here. I'm going to first set it to max-content. You'll notice it looks almost exactly the same as when I had an auto width with a display of inline, and that's because what max-content says is to make the width of my element as wide as it needs to be to fill all of the content at its maximum possible size. So, in our case, when you're dealing with text, it's just going to say how wide does this need to be to fit all of my text on one single line, and that is how wide your container will be. Now, if we come to this other element, this P tag, and we add the exact same width of max-content on there, you're going to notice my text all moves to one line, and my entire container is exactly wide enough to fit all of that content on one line. So, this is kind of a tricky property to work with when you're dealing with text because now you essentially forego any possibility of line wrapping at all because it's always going to make your element long enough to fit all of the text with nothing else wrapping onto another line. Now, if you had other elements inside of here, this would, of course, add even more to your width. So, if I had like images or boxes or so on, icons inside of here, that would obviously add to my width, but essentially it's just going to take up the maximum amount of space possible to fit all of your content inside of it, and then it's going to cut it off right there at that maximum possible size. Now, min-content is essentially the opposite of that. So, let's come to our H1 here, change this to min-content, and now that you'll notice what's essentially happening is it's taking the largest word inside of your text, and it's saying, "Now my container is going to be exactly as wide as my largest possible word." I'll do this to both of them so that we can see exactly what's going on. You can see here my longest word here is "consectetur", whatever that word is, and you can see everything else is just being squeezed in there with that longest word taking up the possible space. So, essentially, we're shrinking down the size of our container to be as small as humanly possible to still fit all of our content. Now, of course, if we had other things in here like icons, images, and so on, those would have to be in there and taking up space as well, and it would just again shrink down and wrap things onto new lines as much as possible to try to fit it in the smallest amount of space possible. Now again, min-content on its own is generally not super useful just because, obviously, you probably don't want your text to be wrapped like this, which is why there's a third property which kind of combines the best of both of these, and that is the fit-content property. So, I'm going to come in here, I'm going to change my H1 and my P tag to fit-content. And if we give this a quick save, you'll notice it actually looks really similar to what we had before when we were doing our width of auto and having a display of inline. And that's because by default, fit-content will try to use the max-content size. So, in our case of our "This is title", you can see that this all fits on one line just fine without going across the size of my screen like, you know, going outside of its container, so it's just going to use the max-content size. Now, if we come down to this paragraph tag here, you can see, obviously, if it tried to fit all of this on one line by using max-content like this, it's going to overflow its container, which is not ideal. So, instead, what fit-content does is it then says, "Okay, if I can't use the max-content size, then I'm essentially going to use the auto-based size." So, it's just going to be auto-sized, and you can see here it's filled in with that auto size. And then, if we were to shrink down our screen even further, eventually, when we got to a small enough possible size, it would say, "Okay, at a certain point, once I get to that min-content size, that's the smallest this element can possibly get." So, essentially, I'm clamping between three different values. I have my minimum size, which is my min-content, my maximum size, which is my max-content, and in between the two, I have essentially an auto size. That is what this fit-content property does. And you can actually emulate this a bit by using a min-width, which is going to be our min-content, our width, which we're going to set to auto, and then a max-width, which we're going to set to max-content. And if we give that a quick save, you can see we essentially get the exact same result on the right-hand side. I can copy this to both rows, and you can see it's doing essentially the exact same thing. Now, there may be minor differences between these two, but essentially that's kind of what fit-content is doing behind the scenes. Now, I mentioned that there's a fit-content function as well, and the fit-content function works essentially the same as fit-content, but instead of using auto as the default value, you can specify whatever the default value is that you want. So, we come in here, we would pass it a function version, and we could say by default we want this to be 100 pixels, or maybe we want it to be like 10 vw or something. Generally, you want it to be something that scales in size, so a vw unit, or a percentage unit, or something like that. So, what this would attempt to do is set the maximum size of this element to my max-content. It would try to be 10 vw whenever it can possibly be, that's the desired size when it's essentially not at my maximum size, and then instead of using min-content as the minimum size, it actually uses auto as the minimum size. So, essentially my element is going to attempt to be 10 vw, it's going to go up to my max-content size, and then if I can't be 10 vw, the smallest I will ever get is going to be that auto-based size. Now, the one problem with the way that fit-content actually works is you can only use it inside of CSS grid. Currently, using it as a width property like this is not supported in CSS, it's an experimental feature, and most likely if they use it with a width property, min-content will be the minimum size that something could possibly be instead of using auto. To demonstrate really quickly what this could look like, I'll just come in here, I'll create a grid, and I'm just going to put a single element inside of here. It doesn't really matter. And we can come in here, we can say that our grid is going to be a display of grid. And our grid template columns, we can come in here with that fit-content function, and we could say that we want it to be 10 VW or something like that. It really doesn't matter. That's going to be essentially the size we want this thing to be. And let's just put some text inside of here, grid text, just like that. And you can see here is my grid text element. And what's essentially happening with this is it's trying to be 10 VW up to its maximum possible size. So, right now this element is wrapping onto another line because 10% of my screen size is quite small at this smaller screen. If I increase my screen size, eventually you would see it wrap onto multiple lines, but of course my screen's not large enough, so let's just change this to 30 VW. Now, you can see it's on mult- or it's not wrapping onto one line cuz it is wide enough with this 30 VW. Essentially, it goes up to its maximum possible max-content size. But as my screen shrinks, eventually you'll see this wraps onto another line because now 30 VW is small enough that it's forcing it to wrap onto multiple lines because it's now smaller than that maximum content. And the smallest this would ever get would be essentially auto size, which means that it's going to be as small as the text can possibly be or any other elements inside of it. Now, when dealing with grids, there's another property you can use, actually a function that's similar to fit-content, but this is called min-max. And the min-max function takes two different properties. It takes a non-flexible minimum size that this thing could possibly be. So, we could pass in like 200 pixels. That's the smallest that this element could possibly be. And then we pass it a flexible size, for example, 1 FR or auto or like max-content, just something that can scale in size, and that's going to be the maximum size this thing can be. So, if we come in here with 1 FR, this just means that this is going to fill to take the remaining space possible, but the smallest it will ever be is going to be 200 pixels. Now, if I come in here and I just add a background color to this, we'll give it that light gray background, just like that. You can see this light gray white gray background is taking up all of the possible space by using this 200 pixels. That's the smallest it can possibly be, and currently my browser is less than 200 pixels. Now, if I increase the size of my browser, eventually you'll see we get to the point where now this entire container is more than 200 pixels wide, so it's using this maximum size, which is just a scalar that is essentially 100% width in this particular scenario. So, minmax is a great way to be able to customize how you want this to be with a minimum particular size. So, we have fit content for doing different types of scaling. We have minmax for doing different types of scaling, and these work inside of a grid, which is really handy because grids are where you have a lot of customization you need to make with sizing to make sure everything scales properly on different screen sizes. Now, the last kind of major sizing thing I want to talk about for scaling different sizes automatically for you is going to be the clamp function, and the clamp function works very similarly to how minwidth, width, and maxwidth work, but you can use it with any property at all, not just ones that have a min and max version, because really height and width are about the only things you can set min and max sizes for. So, what if I wanted to change the font size of this H1? Well, I could do that with the clamp property, and we could just say font size, and the clamp property takes three values. The first is the minimum size we want our font to be. Let's say 20 pixels is the smallest we want this font to be. Then it's going to be taking a scalable size, something like a percentage or a viewport unit or something like that. Let's just say inside of here we have like 2 VW. Doesn't really matter what this is. Then we can come in here with a maximum size. Let's say the maximum we want our font to be is going to be 40 pixels. Now, if we give that a quick save, you can see as I changed my browser screen size, you can see right now we're at that 20 pixel mark. So, maybe let's bump this up a little bit to like 5 VW. That still isn't making a change, so let's come in here with a 10 VW. There we go. You can now see that my font size is much larger. As I shrink down my browser size, you can see my font size decreases until it gets to 20 pixels. Once it gets to 20 pixels, you can see it now no longer decreases. Now, as I increase my browser size, you can see the font size increases until I get to 40 pixels, and once I get to 40 pixels, let's just change it actually to 35 here, so it's a little easier to see. Once I get to that 35 pixels, which happens right here, you can see now no longer is my font size changing. So, this allows me to do a minimum, a maximum, and a desired size in between the two that we can set for literally any property we want. This is useful for font sizes if you want to scale your font sizes. You can also use this for something like padding. So, I can come in here and say that we're going to have some padding. And now you can see as I change around my different browser the padding on my element is going to be changing, which again is a really useful way to scale things for the browser size. Now, obviously, you want to use this sparingly because just blatantly scaling things based on browser size or other properties can lead to potential problems, but it's a really great way to add some responsiveness to your site without adding a lot of media queries and so on. Now, one huge downside to these automatic sizing such as fit-content, max-content, auto, and so on is that you cannot animate them. So, if you want to animate from a height of zero to a height of auto, that's impossible in CSS, or at least it was until now. So, if you want to actually learn how you can animate between height zero, height auto, or literally any other auto-based style, you're going to want to check out the video right over here, which covers everything you need to know about the brand new CSS calc size function.