The Grid
Rather than build an incredibly complex grid system that never gets used, I’m starting with simpler grid bases of only two, three, or four columns. Using CSS grid, I have created a few different variations of three and four column grids that can take any content within, provided the matching number of elements is provided. Grids can then be nested for more complexity if needed.
Grid variants #
Evenly distributed #
Very often, you just want a grid of evenly distributed elements. These are perfect for that scenario. At narrower viewports (< 800 px), the three and four column grids will revert to a two column grid.
Two-Up
Three-Up
Four-Up
Unevenly Distributed
And sometimes you want to have uneven columns, whether that's because you want a sidebar, because you want to accentuate bodies of text with imagery, or for any other layout reasons.
One-Two
Two-One
One-Three
Three-One
One-One-Two
One-Two-One
Two-One-One
Mobile grids
By default, grid elements will stack vertically on mobile devices. To define a particular grid container to work horizontally on mobile devices, add the mobile-grid class to the grid container.
Mobile Grid
Gap variants
There are several utility classes for grids to give more or less space between grid elements. It is important to note that these only affect the gap property, so it will not change the outer padding or margins. By default, the gap uses --space-m (which roughly works out to 13-16 pixels depending on the viewport width).
Default
--space-m which works out to 13-16 pixels
No gap
--space-none which is zero pixels
Tight gap
--space-xs which works out to 6-8 pixels
Comfy gap
--space-l which works out to 19-24 pixels
Loose gap
--space-xl which works out to 26-32 pixels
Nesting grids
Because the grid system is built with CSS Grid and only uses gap to define the gutters between grids, you can nest these to create much more complex grids as needed. Here are just a few examples: