College of Education and Human Development wordmark.

12-column Grid that doesn't collapses on small screens


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

Spanning columns

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


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

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

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