Columns Element

Newspaper flow like content.

Overview

The columns element implements the CSS 3 property "columns". With it you can easily create simple uniform column layouts. The column count can be set up per device class in a responsive manner.

On the downside you loose control on which column an element is displayed. For more sophisticated layouts and control use the Grid Element.

Usage Examples

  • Replacement for Tables.
  • Fluid and flow layouts.
  • Newspaper like display of content
  • ..

Columns Properties

  1. Column Count: The default column count. If you set the column count per device width, this one is also the fallback for very small devices (< 640px).
  2. Column Gap: Gap between the columns (in px) 
  3. Responsive Overrides:
    Small Devices: How many columns should there be on small devices (640px to 767px).
    Medium Devices: 768px to 1023px
    Large Devices: 1024px to 1279px
    Extra Large Devices: >= 1280px
Everything else is configured with the common general properties. 

See it in action

Three Icon Elements on a Column Element. Column count settings: Three columns on large and extra large devices, two on medium ones, one on small and extra small.

Generated HTML (Outline)

<div class="mame-column-control">
   <div class="mame-element mame-columns" style="..">
     ..
   </div>
</details>

Style / CSS Selectors


.mame-columns {
  /* All Mame Columns */
}

.mame-columns > * {
  /* Single Column */
} 

JavaScript

Columns are implemented in plain HTML 5 and CSS 3. They don't need any JavaScript to work properly.

References / Useful information

Was this article helpful?