<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
  <div class="box">12</div>
	<div class="box">13</div>
	<div class="box">14</div>
:root {
	--rows: 3;

body {
  margin: 40px;

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
	margin-bottom: 10px;
  padding: 20px;
  font-size: 150%;
	.js & {
		@supports (display: grid) {

.box:nth-child(even) {
  background-color: #ccc;
  color: #000;

.wrapper {
  width: 600px;
  column-count: 3;
	column-gap: 10px;
	.js & {
		@supports (display:grid) {
			column-count: unset;
			display: grid;
			grid-gap: 10px;
			grid-template-rows: repeat(var(--rows), auto);
			grid-auto-flow: column;
View Compiled
// Adds a class of js to html tag
var el = document.getElementsByTagName('html')[0];

// Calculates the number of items and divides that number by the number of columns you want in your layout
var columns = 3;
var root = document.documentElement,
		items = document.querySelectorAll('.box').length,
		rows = Math.round(items / columns);

root.style.setProperty('--rows', rows);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.