<style>
#contenedor{
background-color: lightblue;
width:500px;
height:500px;
padding:10px;
border:10px solid blue;
}
.elemento{
background-color: red;
border: solid 1px black;
display:inline-block;
box-sizing: border-box;
}
</style>
</head>
<body style="background-color:lightgrey">
<input type="number" id="dimensiones" value="500">
<input type="number" id="ancho" value="3">x<input type="number" id="alto" value="3">
<input class="btn btn-info boton" type="button" id="crear" value="Crear">
<div id="contenedor">
</div>
<script>
$(function () {
$('#crear').click(function () {
var dimensiones = Number($('#dimensiones').val());
var ancho = Number($('#ancho').val());
var alto = Number($('#alto').val());
$('#contenedor').width(dimensiones).height(dimensiones);
$('#contenedor').empty();
for (var i = 0; i < ancho * alto; i++) {
$('#contenedor').append('<div class="elemento"> </div>');
}
$('.elemento').outerWidth($('#contenedor').width() / ancho);
$('.elemento').outerHeight($('#contenedor').height() / alto);
});
});
</script>
