Subgrid width formula
To keep everything from looking chaotic in Web design, we use a grid. CSS Grid allows us to make responsive areas composed of columns and column gaps that we can easily align our child content with to keep everything neat and tidy. However, what if you couldn’t use Grid?
Although CSS Grid works on almost every browser, there are still certain situations in which it won’t, and not just if the user is running internet explorer. For example, when you make an element in a grid and then give that element a child, the child does not see the grid. In other words, you can not use the same commands to line the child up to the grid as you did the parent.
Now there are several ways to have that child element line up with the grid. You could make the parent element a grid as well but that has some drawbacks too, such as if you wanted the parent element to be a flexbox. There is also display:Contents command which makes the children of the parent element act more like siblings to it, allowing them to be aligned to the grid! The problem with this though is that it is not universally implemented yet and you would not be able to style the parent element as it effectively makes it non-existent. The third option I have found, and the one that I would like to discuss today, is by simply manipulating the width.
The problems that we need to overcome
So, the grid is constantly changing its dimensions EXCEPT for the columns, those are fixed. In the example below, we can see the grid columns fluctuating in size while the columns are holding a steady 10px. So really, we are dealing with a variable length and a fixed length. As such, our end width should also have a variable size (%) and a fixed size (px, em, etc.).
The problem with only using percentages is that they can not account for that fixed gap width, because there is always one less gap than there are columns (if it weren’t for that, then percentages would work just fine). Eventually, the improper alignment becomes obvious (as visualized on the left). Not to mention that its guess and check until it gets close. And of course Fixed doesn’t work for obvious reasons. So let's combine them! and we can do this using calc().
The Formula
formula:
Column (C) = p + m
Column w/ gap (Cg) = p + (w + m)
Now before your eyes glaze over, let's break it down into simpler pieces. to start off we need:
N = the # of columns
n = the # of gaps
w = the pixel width of the gap
To find all of the variables you saw in the first equation (m and p), we’ll take the ones we do know (N, n, and w) and plug them into these next equations.
m = (w * n) /-N (in the unit of measure of your choice)
p = 1/N (turn into a percentage)
Example:
We’re going to use the image above and imagine that we want to line up an element inside the gray box. so here,
N = 5, n = 4, and w = 10px
Now to solve for m and p.
m = (10px * 4) / -5 so m = -8px
p = 1/5 so p = 20%
And now to add those values back into our original equation.
C = 20% -8px
Cg = 20% +2px
now we know the relative length of one column or a column plus a gap!
part 2: what if you need more than just one column?
Then, all we need to do is add them together like this.
look at your model and determine if it ends at the beginning of a column (Cg) or the end of one (C), and count how many whole Cg’s you have.
Example:
We’ll use the value of (C) and (Cg) that we found earlier and the above image as our example. So, the light gray box represents our parent element and the dark gray represents the child element. We can see that the child element is comprised of two (Cg) and one (C). So to add them together should look like:
2(Cg) + (C)
2(20% + 2px) + (20% -8px)
40% +4px + 20% -8px
so the width of our child is equal to:
calc(60% -4px)
Simply add that calc() line to your width: and you’ve got a perfectly lined up grid! Hopefully, in the future, a code similar to display:contents gets universally added so we’ll have to do less math. Until then, I hope this helps all of those OCD designers and devs out there who need everything lined up just right.
