College of Education and Human Development wordmark.

12-column Grid

Some times you may need more granular control over column widths. There is a set of classes for a 12-column grid system. Think of a grid of 12 columns like so:

1
2
3
4
5
6
7
8
9
10
11
12

Spanning columns

To span two of those columns, you would use the .span-2 class like this:

1
2
3
4
5
6
7
8
9
10
11
12
.span-2

Centered columns


    <div class="span-2">.span-2</div>

Just append the number of columns you wish to span to .span-. (I.e, .span-1, .span-2, .span-3, .span-4, etc.)

1
2
3
4
5
6
7
8
9
10
11
12
.span-1
.span-2
.span-3
.span-4
.span-5
.span-6
.span-7
.span-8
.span-9
.span-10
.span-11
.span-12

You can also use these in different combinations to achieve the result you want as long as the .span-x values add up to 12.

.span-10
.span-2
.span-4
.span-8
.span-6
.span-2
.span-2
.span-2

The .feature class will also work in conjunction with the .span-x classes for very granular control over the width.

Note: Each column here is wrapped in a .span-12 column so it clears content above and below it.


<div class="span-12">
    <div class="span-1 feature">.span-1.feature</div>
</div>
<div class="span-12">
    <div class="span-2 feature">.span-2.feature</div>
</div>
<div class="span-12">
    <div class="span-3 feature">.span-3.feature</div>
</div>
<div class="span-12">
    <div class="span-4 feature">.span-4.feature</div>
</div>
<div class="span-12">
    <div class="span-5 feature">.span-5.feature</div>
</div>
<div class="span-12">
    <div class="span-6 feature">.span-6.feature</div>
</div>
<div class="span-12">
    <div class="span-7 feature">.span-7.feature</div>
</div>
<div class="span-12">
    <div class="span-8 feature">.span-8.feature</div>
</div>
<div class="span-12">
    <div class="span-9 feature">.span-9.feature</div>
</div>
<div class="span-12">
    <div class="span-10 feature">.span-10.feature</div>
</div>
<div class="span-12">
    <div class="span-11 feature">.span-11.feature</div>
</div>
.span-1.feature
.span-2.feature
.span-3.feature
.span-4.feature
.span-5.feature
.span-6.feature
.span-7.feature
.span-8.feature
.span-9.feature
.span-10.feature
.span-11.feature

Offset classes

Use the push class to push elements to the right.

1
2
3
4
5
6
7
8
9
10
11
12
.span-2
.span-2 .push-1
.span-2 .push-2
.span-2 .push-3
.span-2 .push-4
.span-2 .push-5
.span-2 .push-6
.span-2 .push-7
.span-2 .push-8
.span-2 .push-9
.span-2 .push-10
1
2
3
4
5
6
7
8
9
10
11
12

Nesting grids

Grids nest well.

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
.span-5
.span-7
.span-9
.span-3
.span-2
.span-10
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
.span-8
.span-4
.span-3
.span-9
.span-10
.span-2
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12