css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <pre>
column-width: 30em;
column-gap: 2em;  
column-rule: 1px dotted #ddd;
</pre>

<div class="box">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales eros in nisl suscipit gravida. Quisque vitae dolor dolor. Aliquam arcu dui, pulvinar in risus vel, hendrerit egestas odio. Maecenas ut elit quis massa volutpat aliquam at ut lorem. Suspendisse eget condimentum dui, nec vulputate neque. Vestibulum a blandit quam. Integer lacinia vestibulum erat, non sollicitudin lorem vehicula blandit. Vivamus odio nisl, sollicitudin non blandit blandit, ullamcorper quis mi.

<p>Sed venenatis felis nec ex luctus lacinia. Sed nunc dui, pretium non lorem a, finibus feugiat sem. Donec lobortis orci pretium, bibendum enim et, lobortis urna. In molestie ligula vitae mi vestibulum, sed euismod enim vestibulum. In congue tincidunt quam, nec feugiat lorem tristique a. Curabitur egestas fringilla auctor. Aliquam iaculis elementum erat. Ut ut elit vel est finibus iaculis sed quis massa. Morbi non tincidunt neque. Vivamus ac ante at elit sodales aliquet et vel augue. Nam sodales blandit dapibus.

<p>Nunc egestas diam lorem, at mattis sem scelerisque id. Nullam bibendum felis maximus turpis fringilla mollis. Cras commodo luctus urna nec lobortis. Fusce id fermentum leo, nec sodales sapien. Phasellus vel massa id mi pretium mattis sit amet a ante. Duis massa nisi, sodales vitae posuere et, ornare eget augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In accumsan lacinia mauris nec volutpat. Donec turpis orci, efficitur in porta in, ultricies et dolor. Fusce aliquet nunc varius, facilisis nisi eget, vehicula magna. Phasellus quis tincidunt eros, eu ultricies urna. Aliquam luctus maximus elit tempus tincidunt. Etiam non elementum libero.

<p>Phasellus tristique at justo a dictum. Phasellus venenatis elit leo, ut consectetur sem tristique at. Phasellus mollis erat lobortis, aliquet nulla sed, molestie leo. Aenean eu rutrum dui. Nullam et eros pulvinar, imperdiet enim nec, venenatis nunc. Aliquam quis erat dui. Suspendisse vehicula ante augue, sed pretium magna consectetur vitae. Curabitur quis nibh massa. Vivamus viverra porttitor ante.

<p>Nullam venenatis ipsum eu nunc laoreet lacinia. Vivamus congue hendrerit dictum. Aenean auctor fringilla risus eget laoreet. Fusce imperdiet orci neque, congue commodo massa elementum non. Pellentesque commodo, velit vitae rhoncus laoreet, tortor diam volutpat lorem, eget tempus arcu nunc sed ex. Nam a condimentum est. Nulla facilisis lectus ut neque hendrerit tempus. Nunc neque dolor, imperdiet quis neque eu, tincidunt porta eros.
  
</div>

<p class="css-mine">
  <small>
  (<a href="http://www.cssmine.com/css3-multiple-columns" target="_blank">CSS3 Multiple Columns</a> at CSS Mine)
  </small>
</p> 
            
          
!
            
              .box {
  column-width: 30em;
  column-gap: 2em;  
  column-rule: 1px dotted #ddd;
} 

p {
  margin-top: 0;
}

.css-mine {
  margin-top: 2em;
  clear: both;
}

body {
  margin: 1.5em;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console