As you know, we have several to choose from — and each has a unique purpose, depending on how static or flexible we want things to be.

Earlier in this chapter, we unpacked “Fill” and “Fit Content” sizing — but there’s also a time and place to use “Fixed”, “Relative”, and “Viewport” sizing.

Whether we want our elements to remain at a specific size, scale with our layout, or even respond to a viewer’s screen size, we’ve got options to get the job done.

So let’s dive a bit deeper into how these next three sizing methods work and when to use each one.