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). Top-level 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.

.span16
.span8
.span4
.span4
.span2
.span2
.span2
.span2
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1

Larger spans can be used, but on smaller screens, span width is limited to screen width.

.span15
.span1
.span14
.span2
.span13
.span3
.span12
.span4
.span11
.span5
.span10
.span6
.span9
.span7

Nesting Spans

You can nest spans inside rows, or rows inside spans. You cannot directly nest spans inside spans.

.span6
.span4
.span4
.span6
.span4
.span2
.span1
.span1

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:

OneTwoThree
011011

You can also use text-align: right to make your text align with the right gutter.

If your span has a background color or border, you probably want to nest an 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.)

.span8
.span4
.span4
.span8
.grid-frame
.span4
.span3

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.

(1) .span4
(2) .span6.pull-right
(3) .span4
(1) .span6.pull-right
(2) .span6.pull-right
.span8.pull-right

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-blocks, rather than using floats.

.span3
.span3
.span5

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

.span-full

.row-narrower2

.span-full

When row-narrower* is used inside a grid-frame the margin they add replaces the usual margin that is added to the rows in a grid-frame. So adding row-narrower1 in this case, only reduces the row length by one grid column.

.span8
.grid-frame

.row

.span4
.span3
.span8
.grid-frame

.row.row-narrower1

.span3
.span3

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.

.span8.span-reserve-right2
.span2
.span8.span-reserve-left1
.span1
Live Support