Column splitter app

This app splits a column (or placeholder, if you want) into 1..12 narrower columns. You can put any kinds of contents in the resulting columns.

You can adjust:

  • number of columns (1..12),
  • max-width of the entire block (if there is more space, spacing will be added around the entire block, not the individual sub-columns)
  • height,
  • vertical content alignment: top | center | bottom,
  • spacing width.

Example usage I.

adhoc-art-small.png


Lorem ipsum dolor sit amet, consectetur. Donec tortor nunc, efficitur et orci vel, 

adhoc-art-2-small.png


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin 
metus quis eleifend faucibus magna eget magna sodales feugiat.

adhoc-art-3-small.png


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel orci tortor. 

Example usage II.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget neque ut nisi condimentum blandit.

adhoc-art-small.png
adhoc-art-2-small.png

Lorem ipsum dolor sit amet, consectetur adipiscing faucibus, efficitur viverra orci.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at arcu nec lacus porttitor ornare et ac velit.

adhoc-art-3-small.png

Various columns

blue-box.png
blue-box.png
blue-box.png
blue-box.png
blue-box.png
blue-box.png
blue-box.png
blue-box.png
blue-box.png
blue-box.png

Vertical align: top

blue-box.png
blue-box-tall.png
blue-box.png
blue-box.png
blue-box.png

Vertical align: center

blue-box.png
blue-box-tall.png
blue-box.png
blue-box.png
blue-box.png

Vertical align: bottom

blue-box.png
blue-box-tall.png
blue-box.png
blue-box.png
blue-box.png

Custom spacing

blue-box-flat.png
red-box-flat.png
blue-box-flat.png
red-box-flat.png
blue-box-flat.png
red-box-flat.png

Max width

blue-box-flat.png
blue-box-flat.png
blue-box-flat.png
blue-box-flat.png
blue-box-flat.png
blue-box-flat.png