100 tiles test

by Grzegorz Matyszewski

HTML

<div id="wrap"></div>

CSS

body { margin: 40px; padding: 0; text-align: center; line-height: 0; }
#wrap { display: inline-block; }
span { border-width: 1px 0 1px 1px; border-style: solid; border-color: #901329; background-color: #ed2144; width: 1%; height: 0; padding-bottom: 1%; display: inline-block; vertical-align: top; box-sizing: border-box; }

JavaScript

var wrap = document.getElementById('wrap');
function build() {
	var html = '';
	for (var i = 0; i<2000; i++) {
      html += '<span></span>';
  }
  wrap.innerHTML = html;
}

var resize = function() {
  wrap.style.width = 100 * Math.floor((window.innerWidth - 80) / 100) + 'px';
}

build();

window.onresize = resize;
resize();