Columns

Is an alternative to conventional grid. Columns are controlled by a class .column_N that is specified to the parent element. The width of internal blocks is equal.

Overview

.column_N - where N - is the number of columns. By default there are 12 of them.

column item

column item

column item

column item

<div class="column_4">
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
</div>

Attention!

Column layout is applied to all child elements and is aligned along the top edge

Full width columns

.full-width - stretches the internal elements over the entire width

column item

column item

column item

column item

<div class="column_4 full-width">
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
</div>

Without margins

.margin-none - stretches the internal elements over the entire width without the margins

column item

column item

column item

column item

<div class="column_4 margin-none">
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
</div>

Columns for mobile devices

Columns for mobile devices work just like regular columns, but they use classes with additional prefix:

  • Devices from 481px to 768px  use the class .t-column_N with maximum quantity of columns - 6.
  • Devices with the width up to 480px use the class .m-column_N with maximum quantity of columns - 4.

column item

column item

column item

column item

<div class="column_4 t-column_3 m-column_2">
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
</div>

Share with your friends

Google+