Column

Column

A column is a placeholder element within a Grid that holds Flow Content

Markup Example

  <div class="grid">
    <div class="column"></div>
  </div>

Sizing & Stretching

The height of the column is based on the following:

• The CSS top and bottom offsets: These are added up and subtracted from the stretched Grid height
• Filled containers: Each filled container will reduce the height of the column (see Container sizing rules)

Minimum Height

If the CSS min-height property is set on a column, then the column will not be used if it is stretched to less than the minimum height. For example, if the min-height is 200 pixels, and a filled container decreases the size of the column to 80 pixels, then it will be ignored and left blank.

Fixed Columns

If you add class=fixed to the column, it will not be stretched.

Ordering

Text is flowed into columns based on the order in which they appear in markup. For example, in the markup below:

  <div class="grid">
    <div class="column" style="left: 300px"></div>
    <div class="column" style="left: 0px"></div>
  </div>

Text will be flown from the first column to the second, even though the second column is to the left of the first.