Can't overwrite CSS property with jQuery, what's wrong with my code?

Question

I'm working on the jQuery project in The Odin Project curriculum. I've managed to create a grid inside a container that changes the color of it's boxes but I want to be able to increase the amount of boxes without popping out of the container. I think I can manage if I overwrite the css properties of the boxes with jQuery but can't figure out why it's not working.

Here's my code:

$(document).ready(function grid(boxes)
{
//Declare how many boxes in the grid.
  var boxes = prompt("Choose gridsize");

//Resize boxes assigning css.
  var rcsize = Math.floor(400/boxes - 3);
   $('.row').css('width: ' + rcsize + 'px');
   $('.row').css('height: ' + rcsize + 'px');

//Create grid.
  var $row = $('<div class="row"></div>');
  var $col = $('<div class="col"></div>');
      for (var i = 0; i < boxes; i++) {
          $row.append($col.clone());
      }
      for (var i = 0; i < boxes; i++) {
          $("#outerbox").append($row.clone());
    }
    $('.col').on('hover', function() {
     $(this).addClass('colon');
  });

//Add functionality to navbar buttons.
   $("#g").click(function() {
      prompt("Choose gridsize");
   });

   $("#r").click(function() {
      alert("sup");
   });

   $("#c").click(function() {
     prompt("Choose color: black, red or blue");
   });
});

Here's my CSS:

.body {
  width: 100%;
  height: 100%;
  background-color: #a79696;
  position: absolute;
  margin: 0 0 0 0;
  overflow-x: hidden;
}

.titlelogo {
  background-color: #e38f52;
  height: 25px;
  width: 100%;
  padding: 30px 0 30px 0;
}

#logo {
  margin: 0 0 0 0;
  width: 30%;
  font-size: 20px;
}

#navbar0 {
  margin-top: 0;
  padding: 0;
  background-color: #483f47;
}

.navbar1 {
  display: inline;
  text-decoration-color: white;
}

button {
  margin-left: 45px;
  margin-right: 45px;
  background-color: #ffffff80;
}

#outerbox {
  width: 400px;
  height: 400px;
  margin: 50px;
  border-radius: 10px;
  background-color: #e38f52;
  padding: 12px 0px 0px 12px;
}

.row {
    display: inline-block;
    float: left;
    padding: 1px;
}

.col {
    height: 22px;
    width: 22px;
    margin: 0px;
    outline: 1px solid;
    outline-color: #000;
    float: left;
    background: #e38f52;
    display: inline-block;
    padding: 1px;
}

.colon {
  background: #000;
}

The hover is not working on jsfiddle but it works on my index file for some reason. Thank you in advance. jsfiddle

Answer 1

use css function as below

 $('.row').css('width' , rcsize + 'px');
   $('.row').css('height' , rcsize + 'px');

For reference check this link http://api.jquery.com/css/

Answer 2

you have typo in class . right here

//create grid
var $row = $('<div clas="row"></div>');

it should be

//create grid
var $row = $('<div class="row"></div>');