Demo: Grid layout (Row and Span)
The grid is defined by horizontal
rows, each containing one or more
spans, which each have a width that is an integral number of columns.
The desktop grid is 16 columns wide. These columns remain the same size, even on smaller screens,
so smaller screens get fewer columns per row (12, 8, or 5).
rows are as wide as the page, but it is possible for shorter
rows to occur in nested layouts.
If the total of the sizes of the
spans in a
row exceeds the
number of columns in the
row, the remaining spans will drop
and be displayed below.
Below are some example grid layouts. A white background has been added to the spans page so you can see where they are. Additionally, you can hover over a row to see its outline, and over a span to see its padding.
Larger spans can be used, but on smaller screens, span width is limited to screen width.
You can nest
cannot directly nest
When a row or span has a background or border, there are two options. The edge of the border or background can be drawn halfway into the gutter, or additional padding can be added inside the span.
span includes padding all around.
It is this padding that creates the gutters between the spans.
Here we've turned off the background on the spans so you can
see what they normally would look like.
You can set
width: 100% on an element inside
span and it will span exactly to the gutter
on each side:
You can also use
text-align: right to make your text align
with the right gutter.
grid-frameinside of your
grid-framecontains additional padding so that the text does not hit the border but because of this, it breaks the grid; this text does not align with text that is not in a frame.
If you put a background directly on
span it will cover half of the gutters,
which is usually not what's intended.
If you put a background on an
row, it will cover
all the padding (half the gutters) around all the spans in the
row. This is often what's intended.
Note that the text in these spans aligns with the text in the previous row, even though this row has a background and that one doesn't.
This is one case where you might want the background on an
span to extend into the gutter, so it fills
row. In any case, the text
will align with other spans, both vertically and horizontally.
Rows within a Frame
However, when you create a
grid-frame, extra padding
is introduced to keep the content from hitting the edge of the
frame. Because of this, if you put a
row inside of
grid-frame, the width of the row will be
one grid column less than the width of the
span. In effect, the grid inside the
grid-frame is shifted over by half of a grid column.
(Note: putting a border on a
be done using the
.grid-border-padding mixin so
that the padding can be adjusted accordingly.)
Pulling Spans Right
You can also make spans fill their row right-to-left by adding the
class. This often results in a more responsive layout than offsetting does.
Note that mixing
pull-right spans with default (or
spans will cause them to display in a different order from the markup.
To center a row of spans, add
to the row.
Spans which do not fit on the current row will drop to a new row and still be
However, when coding the HTML for this case, make sure that there is no
whitespace between the
spans. This is because the
centering is being done using
text-align: center on a
inline-blocks, rather than using floats.
Increasing the Row Margin
row-narrower* classes to add margin to a row,
while still aligning to the grid. Each increment adds one
grid column of margin to both the left and right side of
the row. So, for example,
the row width by two grid columns (from 16 to 14 on the desktop).
is used inside a
grid-frame the margin they
add replaces the usual margin that is added to the
rows in a
row-narrower1 in this case, only reduces
the row length by one grid column.
Sometimes layouts are easier to implement using
position: absolute but you still want the
position to align with the grid. The classes
span-reserve-left* reserve space
(by adding padding) on the right or left side of a span.
Spans can then be absolute positioned in that space
with the classes