Построение сетки из ячеек

by aka_SKIff

CSS

.col {
  float: left;
  width: 100px;
  background: #ccc;
}

.row {
  width: 100px;
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

JavaScript

const count = 8;
const columns = 3;
const byColumnRaw = Math.floor(count / columns);
const extra = count % columns;

let html = '';

for (var i = 0; i < columns; i++) {
	html += '<div class="col">'
	let byColumn = i < extra ? byColumnRaw + 1 : byColumnRaw;
	for (var j = 0; j < byColumn; j++) {
  	const index = byColumn * i + j + (i < extra ? 0 : extra);
  	html += '<div class="row">' + index + '</div>';
  }
  html += '</div>'; // Close column
}

document.body.innerHTML = html;