CSS 段組みレイアウト

HTML

<p>
  Use the slider to change the container width:
</p>
<div class="controls">
  <input type="range" id="widthSlider" min="350" max="625">
  <span id="widthDisplay"></span>
</div>
<div class="columnbox">
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent dignissim feugiat tellus, vitae vehicula nunc
  fermentum at. Nulla ut leo tincidunt turpis tincidunt
  facilisis vel sit amet nisl. Duis odio mauris, ornare vitae
  est eget, molestie aliquet quam. Quisque sed lacus sodales
  nulla dignissim semper. Mauris finibus erat ut molestie
  sagittis. Maecenas eget augue dapibus eros mollis
  consectetur quis a mauris. Ut quis ipsum egestas, molestie
  augue id, lobortis neque. Sed malesuada id justo nec
  accumsan. Curabitur non tempus ligula, ut congue libero.
  Morbi mattis, neque at feugiat rutrum, ipsum massa iaculis
  risus, ut rutrum justo purus et urna. Aenean semper ornare
  enim, maximus tincidunt ante tincidunt sed. Fusce imperdiet
  id tellus molestie laoreet.
</p>
<p>
  Sed non fringilla turpis, ac fermentum neque. Nunc tortor
  sapien, convallis in odio dictum, maximus hendrerit metus.
  Phasellus vitae molestie lacus, sed imperdiet enim. Praesent
  tempus ligula eget orci interdum, et tempus nunc rutrum.
  Cras vel arcu non ipsum sodales faucibus vestibulum eu mi.
  Fusce sed laoreet turpis, eu rutrum leo. Vestibulum sit amet
  porta mauris. Curabitur in nisi a neque ultricies iaculis
  sit amet vel felis. Suspendisse lobortis iaculis gravida. Ut
  bibendum vestibulum lacus eget dignissim.
</p>
</div>

JavaScript

let widthSlider = document.getElementById("widthSlider");
let widthDisplay = document.getElementById("widthDisplay");
let columnBox = document.querySelector(".columnbox");

widthSlider.value = columnBox.offsetWidth;
widthDisplay.innerText = widthSlider.value;

widthSlider.addEventListener("input", function(event) {
   columnBox.style.width = widthSlider.value.toString() + "px";
   widthDisplay.innerText = widthSlider.value;
}, false);

CSS

body {
  font: 16px "Open Sans", "Arial", "sans-serif";
}

.columnbox {
  width: 400px;
  column-count: 3;
  column-width: 12em;
  border: 1px dotted black;
}

.columnbox p:first-child {
  margin-top: 0;
}

.controls {
  font: 16px "Open Sans", "Arial", sans-serif;
}

結果