CSS3 Multiple Columns

Use CSS3 to create a set of columns on your website without having to assign individual layers and / or paragraphs for each column.

Along with multiple background images, this following piece of CSS3 is among my favourites list. I think there is a lot of great potential for this CSS and in ways more than just a news paper/magazine layouts too!

CSS 3 Multiple Columns (Width)

One early risen morning, grass layden with dew, Alex awoke with a vision, he knew through and through. It was dark, it was steamy with a heart warming glow. The kettle went on and it's coffee for all! Okay, so it is maybe not a master piece of a tale but I wanted something here that was not Lorem Ipsum! I think it worked. Coffee anyone?

The above paragraph is set to create 2 columns using the following css3 code
  1. CSS 3 Multiple Columns (Width)
  2. #my_CSS3_id {
  3. text-align: justify;
  4. column-count: 2;
  5. column-width: 15em;
  6. column-gap: 2em;
  7. }

CSS 3 Multiple Columns (Count)

One early risen morning, grass layden with dew, Alex awoke with a vision, he knew through and through. It was dark, it was steamy with a heart warming glow. The kettle went on and it's coffee for all! Okay, so it is maybe not a master piece of a tale but I wanted something here that was not Lorem Ipsum! I think it worked. Coffee anyone?

The above paragraph is set to create three columns using the following css3 code
  1. CSS 3 Multiple Columns (Count)
  2. #my_CSS3_id {
  3. text-align: justify;
  4. column-count: 3;
  5. column-gap: 1.5em;
  6. column-rule: 1px solid #c4c8cc;
  7. }

The Zen Elements CSS3 Series

Thank you for reading!
@zen