UCLA Component Library

Grid 

<!-- Default -->
<style>
    .ucla.campus div {
        background: #757575;
        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>


<!-- Two -->
<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>


<!-- Three -->
<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>


<!-- Four -->
<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>


<!-- Five -->
<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>


<!-- Six -->
<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>


<!-- Seven -->
<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>


<!-- Eight -->
<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>


<!-- Nine -->
<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>


<!-- Ten -->
<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>


<!-- Eleven -->
<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>


<!-- Twelve -->
<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>


<!-- Thirteen -->
<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>


<!-- Fourteen -->
<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>