<style>
.ucla.campus div {
background: #757575;
outline: 1px dotted #fff;
outline-offset: -1px;
text-align: center;
color: #fff;
padding: 5px 0;
}
</style>
<div class="ucla campus">
<div class="col span_12_of_12">
1 of 1
</div>
</div>
<div class="ucla campus">
<div class="col span_1_of_2">
1 of 2
</div>
<div class="col span_1_of_2">
2 of 2
</div>
</div>
<div class="ucla campus">
<div class="col span_1_of_3">
1 of 3
</div>
<div class="col span_1_of_3">
2 of 3
</div>
<div class="col span_1_of_3">
3 of 3
</div>
</div>
<div class="ucla campus">
<div class="col span_1_of_4">
1 of 4
</div>
<div class="col span_1_of_4">
2 of 4
</div>
<div class="col span_1_of_4">
3 of 4
</div>
<div class="col span_1_of_4">
4 of 4
</div>
</div>
<div class="ucla campus">
<div class="col span_1_of_5">
1 of 5
</div>
<div class="col span_1_of_5">
2 of 5
</div>
<div class="col span_1_of_5">
3 of 5
</div>
<div class="col span_1_of_5">
4 of 5
</div>
<div class="col span_1_of_5">
5 of 5
</div>
</div>
<div class="ucla campus">
<div class="col span_1_of_6">
1 of 6
</div>
<div class="col span_1_of_6">
2 of 6
</div>
<div class="col span_1_of_6">
3 of 6
</div>
<div class="col span_1_of_6">
4 of 6
</div>
<div class="col span_1_of_6">
5 of 6
</div>
<div class="col span_1_of_6">
6 of 6
</div>
</div>
<div class="ucla campus">
<div class="col span_1_of_7">
1 of 7
</div>
<div class="col span_1_of_7">
2 of 7
</div>
<div class="col span_1_of_7">
3 of 7
</div>
<div class="col span_1_of_7">
4 of 7
</div>
<div class="col span_1_of_7">
5 of 7
</div>
<div class="col span_1_of_7">
6 of 7
</div>
<div class="col span_1_of_7">
7 of 7
</div>
</div>
<div class="ucla campus">
<div class="col span_1_of_8">
1 of 8
</div>
<div class="col span_1_of_8">
2 of 8
</div>
<div class="col span_1_of_8">
3 of 8
</div>
<div class="col span_1_of_8">
4 of 8
</div>
<div class="col span_1_of_8">
5 of 8
</div>
<div class="col span_1_of_8">
6 of 8
</div>
<div class="col span_1_of_8">
7 of 8
</div>
<div class="col span_1_of_8">
8 of 8
</div>
</div>
<div class="ucla campus">
<div class="col span_1_of_9">
1 of 9
</div>
<div class="col span_1_of_9">
2 of 9
</div>
<div class="col span_1_of_9">
3 of 9
</div>
<div class="col span_1_of_9">
4 of 9
</div>
<div class="col span_1_of_9">
5 of 9
</div>
<div class="col span_1_of_9">
6 of 9
</div>
<div class="col span_1_of_9">
7 of 9
</div>
<div class="col span_1_of_9">
8 of 9
</div>
<div class="col span_1_of_9">
9 of 9
</div>
</div>
<div class="ucla campus">
<div class="col span_1_of_10">
1 of 10
</div>
<div class="col span_1_of_10">
2 of 10
</div>
<div class="col span_1_of_10">
3 of 10
</div>
<div class="col span_1_of_10">
4 of 10
</div>
<div class="col span_1_of_10">
5 of 10
</div>
<div class="col span_1_of_10">
6 of 10
</div>
<div class="col span_1_of_10">
7 of 10
</div>
<div class="col span_1_of_10">
8 of 10
</div>
<div class="col span_1_of_10">
9 of 10
</div>
<div class="col span_1_of_10">
10 of 10
</div>
</div>
<div class="ucla campus">
<div class="col span_1_of_11">
1 of 11
</div>
<div class="col span_1_of_11">
2 of 11
</div>
<div class="col span_1_of_11">
3 of 11
</div>
<div class="col span_1_of_11">
4 of 11
</div>
<div class="col span_1_of_11">
5 of 11
</div>
<div class="col span_1_of_11">
6 of 11
</div>
<div class="col span_1_of_11">
7 of 11
</div>
<div class="col span_1_of_11">
8 of 11
</div>
<div class="col span_1_of_11">
9 of 11
</div>
<div class="col span_1_of_11">
10 of 11
</div>
<div class="col span_1_of_11">
11 of 11
</div>
</div>
<div class="ucla campus">
<div class="col span_1_of_12">
1 of 12
</div>
<div class="col span_1_of_12">
2 of 12
</div>
<div class="col span_1_of_12">
3 of 12
</div>
<div class="col span_1_of_12">
4 of 12
</div>
<div class="col span_1_of_12">
5 of 12
</div>
<div class="col span_1_of_12">
6 of 12
</div>
<div class="col span_1_of_12">
7 of 12
</div>
<div class="col span_1_of_12">
8 of 12
</div>
<div class="col span_1_of_12">
9 of 12
</div>
<div class="col span_1_of_12">
10 of 12
</div>
<div class="col span_1_of_12">
11 of 12
</div>
<div class="col span_1_of_12">
12 of 12
</div>
</div>
<div class="ucla campus">
<div class="col span_6_of_12">
This is column 1, that spans 6 columns of 12.
</div>
<div class="col span_3_of_12">
This is column 2, that spans 3 columns of 12.
</div>
<div class="col span_3_of_12">
This is column 3, that spans 3 columns of 12.
</div>
</div>
<div class="ucla campus">
<div class="col span_9_of_12">
<div class="ucla campus">
<div class="col span_12_of_12">
Body Content 12 of 12
</div>
</div>
<div class="ucla campus">
<div class="col span_6_of_12">
Body Content 6 of 6
</div>
<div class="col span_6_of_12">
Body Content 6 of 6
</div>
</div>
</div>
<div class="col span_3_of_12">
Menu content
</div>
</div>