Div dinámicos

 <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">&nbsp;</div>');
                    }

                    $('.elemento').outerWidth($('#contenedor').width() / ancho);
                    $('.elemento').outerHeight($('#contenedor').height() / alto);

                });
            });

        </script>