Skip to content

Instantly share code, notes, and snippets.

@leonardo403

leonardo403/CSS3-Create-Multiple-Columns.markdown

Created September 22, 2014 06:39
Show Gist options
  • Save leonardo403/23231f34581173376632 to your computer and use it in GitHub Desktop.
Save leonardo403/23231f34581173376632 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Leonardo Lima.
Raw
CSS3-Create-Multiple-Columns.markdown

CSS3 Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into.

A Pen by Leonardo Lima on CodePen.

License.

Raw
index.html
<div class="news">
<h1>News</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi quidem, dignissimos eligendi vel fugit amet eius similique, doloribus, voluptatum earum veniam ipsa perferendis voluptates, nobis laboriosam facere soluta quod reprehenderit!
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
Raw
style.css
.news > p{
display:block;
background: linear-gradient( red 50%,green 50%);
border-radius:15px;
text-align:center;
-webkit-column-count:3;/*Chrome,Safari and Opera*/
-moz-column-count:3;/*Firefox*/
column-count:3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment