<h1>
CSS Multi-Column: column-fill demo
</h1>

<form>
  <fieldset>
    <label class="active">
      <input type="radio" name="class" value="container--one" checked="checked" class="radio">
      <code>column-fill: auto</code>
    </label>
    <label>
      <input type="radio" name="class" value="container--two" class="radio">
      <code>column-fill: balance</code>
    </label>
  </fieldset>  
</form>

<div class="container container--one" id="container">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error laudantium dicta maiores voluptatibus corporis aliquid placeat porro fugit? Voluptatibus impedit dolor nesciunt, corrupti reiciendis molestias minima amet itaque rem! Ipsam?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error laudantium dicta maiores voluptatibus corporis aliquid placeat porro fugit? Voluptatibus impedit dolor nesciunt, corrupti reiciendis molestias minima amet itaque rem! Ipsam?
  </p>    
</div>
.container--one {
  column-fill: auto;
}

.container--two {
  column-fill: balance;
}


/* ETC (Formatting only): */

body {
  margin: 1.5em;
  font-size: 130%;
  font-family: sans-serif;
  background: #F2F0EC;
  color: #2E2C08;
}

.container { 
  border: 10px solid #2E2C08;
  background: white;  
  padding: 1rem;
}

.box {
  margin: 0.25rem;
  padding: 0.5em;
  text-align: center;
  background: #e5e3de;
}

fieldset {
  border: #abab9d 1px solid;
  padding: 0;
  margin-bottom: 2em; 
}

label {
  display: inline-block;
  padding: 0.5em;
  cursor: pointer;
}

.active {
  background: #abab9d;
}

.container {
  padding: 1rem;
  columns: 15em 3;
}

.container p {
  margin: 0 0 0.5rem;
  padding: 0;
}

var radios = document.querySelectorAll('.radio');
var container = document.getElementById('container');
radios.forEach(function(i){
    i.addEventListener('click', function(el){
        var clicked = el.currentTarget;
        var active = clicked.parentElement.parentElement.querySelector('.active');
        active && active.classList.remove('active');
        clicked.parentElement.classList.add('active');     
        container.className = 'container '+clicked.value;
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.