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.

      <h1>Multi-column layout</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet congue massa. Cras in mollis mi, vel vehicula massa. Ut vestibulum massa in est viverra vulputate. Mauris feugiat sit amet nunc in posuere. Mauris rutrum, diam tristique aliquet tincidunt, tortor nibh volutpat dui, a viverra sapien urna sit amet enim. Donec dapibus tempor felis, nec congue est facilisis malesuada. Ut pellentesque nisl nec nisi lobortis malesuada at id turpis. Nam luctus elementum condimentum. Donec nec ullamcorper quam, vitae scelerisque ex. Donec id purus a elit bibendum facilisis nec in libero. Pellentesque nec leo sed erat facilisis sagittis. Nunc quis urna sit amet lorem vehicula posuere. Phasellus porttitor non velit ut tempor. Integer dapibus id nulla id iaculis. Maecenas eget pretium enim.</p>
      <p>Phasellus nec dui ultricies dolor fermentum tempor. Mauris eu turpis sed augue sagittis commodo vitae non ante. Cras id faucibus dui, sed tincidunt lorem. Cras mollis rutrum rhoncus. Nam id laoreet nisl. Aenean ultrices, urna iaculis egestas sodales, mi nibh vestibulum nulla, quis congue enim nulla malesuada magna. Cras volutpat sapien eget ante volutpat tempus. Vestibulum sed augue felis. Maecenas consequat pharetra iaculis. Praesent et egestas tortor. Sed tincidunt metus nec sapien rutrum, ut ullamcorper dolor dictum. Vestibulum bibendum, metus vitae iaculis scelerisque, mauris ante ultrices velit, id auctor arcu justo non nisl. Vivamus gravida non nunc at suscipit. Proin lobortis fringilla justo ut hendrerit.</p>
      <p>Phasellus vitae blandit ligula. Donec vel sapien erat. Nam hendrerit hendrerit elit. Vivamus in justo malesuada, cursus felis a, eleifend orci. Donec eget orci sit amet dui pellentesque lobortis in non massa. Sed laoreet libero non dui consectetur volutpat. Nunc nec tortor at diam convallis tempus sit amet in nulla. Suspendisse sodales egestas vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed feugiat quam posuere, volutpat nulla ac, fermentum leo. Praesent quam odio, egestas semper finibus non, porttitor ac massa. Fusce dictum nisi rutrum gravida tincidunt. Nunc diam felis, aliquet ac ipsum non, hendrerit tempor ex.</p>
      <p>Fusce quis sapien ut ligula pulvinar scelerisque quis a metus. Vestibulum consequat arcu ut arcu viverra mattis. Mauris sit amet dignissim erat. Mauris eget massa sed ex congue dapibus. Sed malesuada congue ligula, commodo sollicitudin purus cursus in. Praesent vestibulum vel nisi nec maximus. Donec dui libero, efficitur at tempus sit amet, efficitur non est. Phasellus sollicitudin auctor convallis. Sed aliquam et dui sit amet hendrerit. Mauris quis sollicitudin massa. Etiam sed odio in purus feugiat commodo. Donec vitae facilisis quam. Praesent vel vestibulum tortor. Vestibulum ullamcorper aliquam viverra. Quisque vulputate nec augue sit amet efficitur.</p>
      <p>Praesent tristique mi id pulvinar sodales. Proin sed interdum dolor. Proin maximus aliquam vulputate. Donec pulvinar est et lacus venenatis, ut interdum tortor bibendum. Nam suscipit felis leo, id dignissim risus eleifend ac. Curabitur in varius ante. Donec et nunc rhoncus, sodales diam et, tempus nunc. Nullam scelerisque turpis massa, id pretium nunc facilisis at. Nullam congue tristique elit id rhoncus.</p>
              body {
      width: 80%;
      margin: 50px auto;
      font-family: helvetica;
      line-height: 1.5em;

main { 
      /* hier gebeurt de magic */
      column-count: 3;
      column-gap: 2em;
      column-rule: 1px solid black;

h1 {
      font-weight: 700;
      margin-bottom: 1em;
      font-size: 1.5em;
      letter-spacing: 0.1em;

p {
      margin-bottom: 1em;

🕑 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 ..................