Demo: Grid layout (Row and Span)
The grid is defined by horizontal row
s, each containing one or more
span
s, 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).
Top-level row
s are as wide as the page, but it is possible for shorter
row
s to occur in nested layouts.
If the total of the sizes of the span
s 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.
Nesting Spans
You can nest span
s inside row
s,
or row
s inside span
s. You
cannot directly nest span
s inside span
s.
Framed Spans
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.
Each 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
an span
and it will span exactly to the gutter
on each side:
One | Two | Three |
01 | 10 | 11 |
You can also use
text-align: right
to make your text align
with the right gutter.
grid-frame
inside of your
span
. The grid-frame
contains
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
an 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.
Frames will align, too.
This is one case where you might want the background on an
span
to extend into the gutter, so it fills
the surrounding 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
a grid-frame
, the width of the row will be
one grid column less than the width of the grid-frame
's
parent span
. In effect, the grid inside the
grid-frame
is shifted over by half of a grid column.
(Note: putting a border on a grid-frame
should
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 pull-right
class. This often results in a more responsive layout than offsetting does.
Note that mixing pull-right
spans with default (or pull-left
)
spans will cause them to display in a different order from the markup.
Centering Rows
To center a row of spans, add class="row-centered"
to the row.
Spans which do not fit on the current row will drop to a new row and still be
centered.
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
string of inline-block
s, rather than using floats.
Increasing the Row Margin
Use 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, row-narrower1
reduces
the row width by two grid columns (from 16 to 14 on the desktop).
.row-narrower1
.row-narrower2
When row-narrower*
is used inside a grid-frame
the margin they
add replaces the usual margin that is added to the
row
s in a grid-frame
. So
adding row-narrower1
in this case, only reduces
the row length by one grid column.
.row
.row.row-narrower1
Sometimes layouts are easier to implement using
position: absolute
but you still want the
position to align with the grid. The classes
span-reserve-right*
and
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
span-position-right
and
span-position-left
.