http://jsfiddle.net/prashanthcr/cv5c3cah/1/
Here is a snippet of HTML code:
<h2 id="header">Etch-a-Sketch!</h2>
<div id="wrapper">
<div id="grid"></div>
</div>
<input id="size" type="number" value="10">
<button id="button">New Grid</button>
This is the JavaScript (jQuery) code:
$(document).ready(function() {
var cellsPerSide = $("#size").val();
var cellSize = $("#grid").width() / cellsPerSide;
$(".cell").css({"width": cellSize, "height": cellSize, "opacity": "1"})
for (var i = 0; i < cellsPerSide * cellsPerSide; i++) {
$("#grid").append("<div class='cell'></div>");
}
});
And here is the CSS code:
.cell {
background-color: red;
}
The author experimented with fixed and dynamic sizes for the grid cells. The static solution worked, but the dynamic one did not display the divs as intended. Suggestions on making it work or achieving a grid of cells with no gaps are welcome.
The attempt to use display:inline-block resulted in extra space between lines, which was not desired.