A Pen by Leonardo Lima.

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.

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>

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;
  
}