open menu

Grid

Grid

12 columns

1

2

3

4

5

6

7

8

9

10

11

12

<div class="container">
    <div class="row">
        <div class="column xlarge-1 large-2 medium-3 small-12">
            1
        </div>
        <div class="column xlarge-1 large-2 medium-3 small-12">
            2
        </div>
        <div class="column xlarge-1 large-2 medium-3 small-12">
            3
        </div>
        <div class="column xlarge-1 large-2 medium-3 small-12">
            4
        </div>
        <div class="column xlarge-1 large-2 medium-3 small-12">
            5
        </div>
        <div class="column xlarge-1 large-2 medium-3 small-12">
            6
        </div>
        <div class="column xlarge-1 large-2 medium-3 small-12">
            7
        </div>
        <div class="column xlarge-1 large-2 medium-3 small-12">
            8
        </div>
        <div class="column xlarge-1 large-2 medium-3 small-12">
            9
        </div>
        <div class="column xlarge-1 large-2 medium-3 small-12">
            10
        </div>
        <div class="column xlarge-1 large-2 medium-3 small-12">
            11
        </div>
        <div class="column xlarge-1 large-2 medium-3 small-12">
            12
        </div>
    </div>
</div>

2 columns each

2 columns

2 columns

2 columns

2 columns

2 columns

2 columns

<div class="container">
    <div class="row">
        <div class="column xlarge-2 medium-4 small-12">
            2 columns
        </div>
        <div class="column xlarge-2 medium-4 small-12">
            2 columns
        </div>
        <div class="column xlarge-2 medium-4 small-12">
            2 columns
        </div>
        <div class="column xlarge-2 medium-4 small-12">
            2 columns
        </div>
        <div class="column xlarge-2 medium-4 small-12">
            2 columns
        </div>
        <div class="column xlarge-2 medium-4 small-12">
            2 columns
        </div>
    </div>
</div>

3 columns each

3 columns

3 columns

3 columns

3 columns

<div class="container">
    <div class="row">
        <div class="column xlarge-3 medium-6 small-12">
            3 columns
        </div>
        <div class="column xlarge-3 medium-6 small-12">
            3 columns
        </div>
        <div class="column xlarge-3 medium-6 small-12">
            3 columns
        </div>
        <div class="column xlarge-3 medium-6 small-12">
            3 columns
        </div>
    </div>
</div>

4 columns each

4 columns

4 columns

4 columns

<div class="container">
    <div class="row">
        <div class="column xlarge-4 small-12">
            4 columns
        </div>
        <div class="column xlarge-4 small-12">
            4 columns
        </div>
        <div class="column xlarge-4 small-12">
            4 columns
        </div>
    </div>
</div>

5 columns / 7 columns

5 columns

7 columns

<div class="container">
    <div class="row">
        <div class="column xlarge-5 small-12">
            5 columns
        </div>
        <div class="column xlarge-7 small-12">
            7 columns
        </div>
    </div>
</div>

6 columns each

6 columns

6 columns

<div class="container">
    <div class="row">
        <div class="column xlarge-6 small-12">
            6 columns
        </div>
        <div class="column xlarge-6 small-12">
            6 columns
        </div>
    </div>
</div>

7 columns / 5 columns

7 columns

5

<div class="container">
    <div class="row">
        <div class="column xlarge-7 small-12">
            7 columns
        </div>
        <div class="column xlarge-5 small-12">
            5 columns
        </div>
    </div>
</div>

8 columns / 4 columns

8 columns

4

<div class="container">
    <div class="row">
        <div class="column xlarge-8 small-12">
            8 columns
        </div>
        <div class="column xlarge-4 small-12">
            4 columns
        </div>
    </div>
</div>

9 columns / 3 columns

9 columns

3

<div class="container">
    <div class="row">
        <div class="column xlarge-9 small-12">
            9 columns
        </div>
        <div class="column xlarge-3 small-12">
            3 columns
        </div>
    </div>
</div>

10 columns / 2 columns

10 columns

2

<div class="container">
    <div class="row">
        <div class="column xlarge-10 small-12">
            10 columns
        </div>
        <div class="column xlarge-2 small-12">
            2 columns
        </div>
    </div>
</div>

11 columns / 1 column

11 columns

1

<div class="container">
    <div class="row">
        <div class="column xlarge-11 small-12">
            11 columns
        </div>
        <div class="column xlarge-1 small-12">
            1 column
        </div>
    </div>
</div>