24 September 2020
A More Flexible Vertical Grid
by Katie Pohlman
You may have read my previous article about vertical rhythm on the web. The article you’re reading now is a follow-up to that. Enjoy!
Designing on a grid is not a new concept to front-end designers but, how we do it has certainly evolved. When the concept first came about, a variety of tools and frameworks erupted to support responsive 12-column grid design, and simplify the setup to get there—think Bootstrap and company. Then along came Flexbox and CSS Grid, which opened up a new world of layout possibilities. But what I find more fascinating, is somewhere along the way, the concept of maintaining a vertical grid on the web solidified.
Historically, I would eye-ball vertical spacing. When I learned of the vertical grid, though, I was immediately sold on the idea. Rather than going with gut feel, why not set up a structure for vertical rhythm? The caveat was that I had no idea how to implement it. I struggled with getting line-height to feel appropriate in every situation; there was always something slightly off. Luckily, I finally figured that bit out.
My previous post gave a walkthrough of setting up a scalable and maintainable vertical grid based on your body line-height using SASS variables and a function. I’m here to walk you through that again, with a modification that allows for more flexibility and fine-tuning.
Establishing the Grid
First things first, we need to decide what unit our grid is going to be based on. In my previous post, I recommended using line-height because it’s already there. While that is an option, it doesn’t allow for fine-tuning of line-height for different font sizes, and I found that out the hard way.
The way to alleviate this typographic debacle is to use a different unit altogether. Instead of basing our grid on line-height, let’s use a smaller unit, say 4px. “Why 4px?,” you ask? Tangentially, I’ve gotten into the habit of using an 8px “soft grid” in place of a 12-column grid for reasons I won’t dive into here. I could carry that 8px grid through to my vertical grid, but I’ve found it still is just a bit too large to really fine-tune line-height at certain type sizes; so I cut it in half. If you don’t like the 4px grid, you could use any unit you’d like. But I’ve found this one to work well for me.
Now, assuming you already have your browser reset styles in place, here is the code you’ll need:
SASS Variable
$grid: 4px;
Function
@function grid($count) {
@return calc(#{$grid} * #{$count});
}
This is the part that makes it really easy to maintain and scale with a grid. Once you have the function set up, you can simply call it and pass through how many grid lines you want to use through the $count variable. For example: grid(4) would return 16px.
Base Styles
This sets the baseline typography style, everything will follow this rhythm unless otherwise specified.
html, body {
font-size: 16px;
line-height: grid(6);
}
* {
line-height: grid(6);
}
In the wild
Now comes the fun part: using the grid throughout your app! I put together an updated CodePen for you to test it out for yourself. Let me know what you think!
