Spread isn’t new to Susy3, or even to Susy generally, but its full
power is usually hidden behind other settings (like
Susy2), or opinionated assumptions about your grid. We didn’t invent the
idea behind spread – every grid system has to make these decisions – but
we haven’t seen anyone else talking about it explicitly.
In Susy3 we’ve tried to move in the other direction – naming spread, and making it central to the API – giving you full control over the math.
Spread on Containers
Container-spread describes how a grid-parent (or container) handles
available gutters. Most grids only put gutters between the columns. That
means there will be one less gutter than there are columns. We call that
narrow container-spread, and make it the default.
Some grids use “split” gutters, with half of a gutter on either side of
a column – forming full-gutters between columns, and an extra half at
the edges. Mathematically, that means we have an equal number of gutters
and columns. We call that a
Occasionally, a grid will have full gutters on both sides, meaning there
is one more gutter than columns. We call that a
Spread on Spans
Spread describes the same concept as it relates to internal
grid-spanning elements. In most systems, including the new CSS Grid
module, all spans are
narrow – meaning they only span intermediate gutters.
Occasionally it’s useful to span as many gutters as columns – a
spread – if you have split-padding gutters, for example, or if you want
elements to touch at certain places, or if you are pushing and pulling
elements in the grid.
It’s rare that you need to span a
wider spread, but we’ll let you
decide if it’s useful.
In Susy3 there is no single grid “container” element that receives special treatment. Instead, container spans are described in the same syntax as any other span – and any element containing other grid-aligned elements is a container.
Fluid-span calculations require understanding both the container width and span-width. The Sass math looks like this:
$fluid-width: percentage($span-width / $container-width);
For that reason, it’s important to be explicit with Susy about the spread of both containers and spans, when you are building fluid grids. In the Susy3 syntax, that looks like:
$width: span(3 wide of 6 narrow);
If it comes before
of, it describes the span. If it comes after
it describes the container. In most cases, there will be a sensible
default for both values, which you can set in the global settings:
// Both default to "narrow"...
Common Use Cases
Commonly, all spans have a
narrow spread. In fact, the CSS Grid module
doesn’t provide any way to span across extra gutters. You would have to
wider span using negative
There are times when you simply want to span across a gutter, for the sake of style. But there are other common reasons to span extra gutters. Let’s look at a few.
Pushing, Pulling, & Padding Elements
It’s sometimes necessary to “push” and “pull” elements out of their
usual flow position, or add grid-aligned padding. You can do that by
span functions on the
padding of an element.
Push with positive left margins, pull with negative right margins, and
pad either side with the padding property.
In all those cases, you’ll probably need a
wide span in order to align
your content with the proper column:
Some grid systems use “split” gutters, with half a gutter on either side
of an element. That will add an extra gutter to your total grid width,
giving your common
wide spread. If you are using split
gutters, you likely want to set
container-spread: wide in your global settings.
wide container, with
narrow spans and split gutters:
If you move the gutters inside, using the
padding property, both
container-spread may need to be
wide. I say “may”
because it also depends on your
border-box-sizing. That’s a whole new
article, and honestly: padding gutters make the math much simpler. If
you use padding gutters, there’s a good chance you don’t need Susy.
More about that in my next post. Until then: Happy coding!