Create Viewport Responsive Layout Spacing Using CSS Clamp
Learn how to use the modern CSS property clamp() to create responsive layout sizing that adjusts to the viewport size without the use of media queries. Instead, use a CSS variable to set the base unit size and combine it with calc() and viewport units to define minimum, preferred, and maximum values within clamp().
Stephanie Eckles: [0:00] Here, we have mockup, a standard dashboard type of layout with a header bar, a sidebar, and a content area. Now, there's two article elements here, but we're missing an important property to distinguish them, which is margin.
[0:15] A popular way to add spacing into layouts is with a rigid grid. As an example, one type of layout grid is the eight-pixel grid. Let's create a custom CSS property called unit and set it to .5 rem which under default browser circumstances equates to 8 pixels but with the advantage of responding to any user settings for their font size.
[0:41] Then, on our article, we will add a rule for margin. Using the calc() function, we can set 2 * times and then bring in our var(--unit). In other words, 2 * .5 rem. That's going to equate to 16 pixels of margin around our articles.
[1:00] Now, the issue with this method is that regardless of viewport size, the spacing will always be 16 pixels. For users on large desktops or even TVs, it may be beneficial to provide a bit more spacing around content elements. Let's reset that.
[1:19] Instead, we can use a modern CSS property called clamp(). Clamp is a function that intakes a minimum allowed value, a preferred value, and a max value. In our case, we can copy what we did before, essentially setting 16 pixels as the minimum allowed value, and then we'll bring in viewport units.
[1:42] In this case, we'll add 5vw as the preferred value, and then once more, a calc() function to multiply our unit times 5, making our max allowed value 40 pixels. On Save, as I resize the viewport, you can see that margin adjusting based on where it falls within that range. On the smallest viewport, the calculated margin is no less than 16 pixels, and it is allowed to grow up to 40 pixels.
[2:17] We're using the same value for all sides, but we can take advantage of viewport units even further by updating our top and bottom value to use view height. Now that this value is only for our left and right, let's update it to allow it to have a bit more space, so update our minimum value to be our unit times 4 and our max to be our unit times 8.
[2:40] On Save, you saw just a little increase in the allowed visual width. If we use the device toolbar, courtesy of DevTools, we can also see how the height affects the vertical space between our articles.
[2:56] In this lesson, we learned how to use the modern CSS function clamp() to set a minimum, a preferred, and a maximum value. In conjunction with viewport units like view height and view width, we enabled a layout that is able to fluidly take advantage of the viewport size currently in use.