$(document).ready(function(){ // Immerse yourself in squares. var dim = Math.round(($('#boxen').parent().width() - 16) / 8) * 8; $('#boxen').width(dim); $('#boxen').height(dim); var box_count = Math.pow(dim / 8, 2); // We'll do it live! for (var i=0; i<box_count; i++){ var r = Math.round(Math.random() * 255); var g = Math.round(Math.random() * 255); var b = Math.round(Math.random() * 255); var color = 'rgb(' + r + ', ' + g + ', ' + b + ')'; $('<li>').attr('style', 'background-color: ' + color).appendTo('#boxen'); } });
<ul id="boxen"></ul>
#boxen{ background-color: #ccc; } #boxen li{ display: block; width: 8px; height: 8px; float: left; }