Elastic CSS Framework Columns Examples

Elastic provides a complete system for complex layouts, explaining every combination in detail takes many lines, and sometimes there are several solutions to accomplish the same results.

This examples only scratch the surface of the capabilities of the framework, but will put you on the right track and open your mind to play with the elastic syntax and accomplish all your needs fast. Also remember you can nest this samples to accomplish even more combinations.

Example of a single column. (If you are having one single column it is better to use a "unit" instead.)
column
Examples of on-2, on-3, on-4 & on-5 columns.
column 1
column 2
column 1
column 2
column 3
column 1
column 2
column 3
column 4
column 1
column 2
column 3
column 4
column 5
Example of a 2 columns, 3 columns, 4 columns, and 5 columns without specifying the "on-#".
column 1
column 2
column 1
column 2
column 3
column 1
column 2
column 3
column 4
column 1
column 2
column 3
column 4
column 5
Example of a multi columns usage without specifying the "on-#".
column 1
column 2
column 3
column 4
column 5
column 6
column 7
column 8
column 9
column 10
column 11
column 12
column 13
Example of what happens when you super-charge a "columns on-10" with 26 columns.
column 1
column 2
column 3
column 4
column 5
column 6
column 7
column 8
column 9
column 10
column 11
column 12
column 13
column 14
column 15
column 16
column 17
column 18
column 19
column 20
column 21
column 22
column 23
column 24
column 25
column 26
Example of calendar. Using a "columns on-7" and super-charging it 7 colums for the day's name and other 30 columns for the days.
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
day 1
day 2
day 3
day 4
day 5
day 6
day 7
day 8
day 9
day 10
day 11
day 12
day 13
day 14
day 15
day 16
day 17
day 18
day 19
day 20
day 21
day 22
day 23
day 24
day 25
day 26
day 27
day 28
day 29
day 30
Same example of the calendar but now inside a "columns on-2".
I'm a column inside of a "columns on-2" so my width is the 50% of my parent.
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
day 1
day 2
day 3
day 4
day 5
day 6
day 7
day 8
day 9
day 10
day 11
day 12
day 13
day 14
day 15
day 16
day 17
day 18
day 19
day 20
day 21
day 22
day 23
day 24
day 25
day 26
day 27
day 28
day 29
day 30
Example of the use of "span-#" inside a "columns on-3" with a lot of columns to see alot of cases.
column with "span-2". Width:66%
simple column
simple column
column with "span-2". Width:66%
column with "span-2". Width:66%
simple column
simple column
column with "span-2". Width:66%
column with "span-3". Width:100%
simple column
simple column
simple column
column with "span-4". Width:100%
simple column
simple column
simple column
Example of a set of columns with "Lorem Ipsum" Text. (Some columns are using the full-height helper so that they can have the same height of it parent.)

Simple Column - Inside a "columns on-2"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Simple Column - Inside a "columns on-2"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Simple Column - Inside a "columns on-3"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Simple Column - Inside a "columns on-3"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Simple Column - Inside a "columns on-3"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Simple Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum in voluptate velit esse cillum dolore eu fugiat.

Simple Column - Inside a "columns on-4"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Column with "span-2" - Inside a "columns on-4"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Simple Column - Inside a "columns on-4"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

All the examples above are simple cases that only uses the "columns on-#", "column span-#" of the clases of the Elastic CSS Framework.

For more examples and tutorials please look at the other demo files or watch more tutorials at elasticss.com