• Homepage
• Navigational boxes
• Feature boxes
• Grid system
• Accordions
• Tables
• Forms

Grid system

Find out how to use grids to arrange items on a University of Sussex web page.

The grid class complements navigation and box elements. It provides no style of its own (save for layout structure). It's there as a container for other elements. The structure of this design pattern matches that of the box elements closely.

Using grid requires that you define the x-range as you would the navigation or boxes (x2, x3, etc.) and then you can use a c-range (c1, c2, etc.) for the number of columns you want the div to span.

You shouldn't have multiple non-ranged divs. This will cause incorrect positioning when lined up against an odd number of boxes or navigation elements.

All examples on this page are shown with a navigation block so that you can see the alignment, and the content within the grid is specifically styled so that you can easily see it:

p.showbox {
    border: 1px dotted #598527;
    min-height:4em;
    background-color: #c4df9b;
    padding: 0.5em;
    margin-bottom: 0;
}

Do not colour your grid boxes. They are there to provide a layout framework in which to place other content.

You can skip down the page to read about:

• x2 grid examples
• x3 grid examples
• x4 grid examples
• x5 grid examples

Basic example

<div class="grid x5">
    <div class="c3">
        <div>
            <iframe width="100%" height="300" src="//www.youtube.com/embed/fiLAn7EJa6g?rel=0" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
    <div class="c2">
        <div>
            <p>Some other content goes here that will span two columns of the x5 boxes.  The other div is undefined so will span the rest.</p>
        </div>
    </div>
</div>

x2 grid examples

<div class="grid x2">
    <div class="c1">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
    <div class="c1">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
</div>

x3 grid examples

<div class="grid x3">
    <div class="c1">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
    <div class="c2">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
</div>

<div class="grid x3">
    <div class="c2">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
    <div class="c1">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
</div>

<div class="grid x3">
    <div class="c1">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
    <div class="c2">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
</div>

x4 grid examples

<div class="grid x4">
    <div class="c1">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
    <div class="c3">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
</div>

<div class="grid x4">
    <div class="c1">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
    <div class="c2">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
    <div class="c1">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
</div>

x5 grid examples

<div class="grid x5">
    <div class="c2">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
    <div class="c1">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
    <div class="c2">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
</div>

<div class="grid x5">
    <div class="c3">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
    <div class="c2">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
</div>

<div class="grid x5">
    <div class="c1">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
    <div class="c3">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
    <div class="c1">
        <div>
            <p>grid content in here</p>
        </div>
    </div>
</div>