# Columns

The Columns system provides a simple way to create balanced column layouts that look great on the device. For more complex layouts, check out our [Grid system](/framework/docs/1.2/grid). You can use both systems together - the Columns system for your overall layout, and the Grid system within columns when you need more layout control - or use either system independently.

### Basic Column Layout

The basic column layout is flexible - you can add as many columns as needed depending on your content needs.

1

2

3

Columns

    <div class="columns">
      <div class="column">
        {{ Content for column 1 }}
      </div>
      <div class="column">
        {{ Content for column 2 }}
      </div>
      <div class="column">
        {{ Content for column 3 }}
      </div>
    </div>

Previous

[Title Bar Standardized title bar with plugin information and instance details](/framework/docs/1.2/title_bar)

Next

[Mashup Assemble multiple plugin views into a single interface](/framework/docs/1.2/mashup)