How can I make variable amount of divs fill parent container 100%?

I'm trying to make a grid of divs depending upon user input. I.e - user puts in the number 10, I create a 10x10 grid of divs. The overall size of the grid, regardless of the number of squares inside of it, should be the same size.

I'm initially starting off the page with a 4x4 grid table at 1000x1000 pixels. The problem I'm running into is that if I just set the divs = 25% of the height/width of the container div, they don't fit (even with messing with negative margins to remove the space). I'm assuming this is because the parent div container has a border, and each div has a border, which all eat into the available space.

I can easily enough rig the sizes so that they fit. My problem is that I know once I start varying the amount of grids in the square, that fixed number will no longer work. How can I set the divs to fill the container, taking into account border sizes and whatnot? Here's what I have so far:

http://ift.tt/1LLIaWz

.wrapper {
margin: auto 50 auto auto;
width: 1000px;
height: 1000px;
border: black 4px solid;
}

.indivCell {
display: inline-block;
border: black 1px solid;
background-color: #E0E0D1;
width: 25%;
height: 25%;  
margin: -1px;
}

I don't necessarily need the answer, but a hint or two would be great. I've been googling all over the place for this and everyone keeps saying just to set the size to a percentage, but I don't think that'll work as putting in more divs will increase the amount of borders inside of it and thus throw off the available space.

Thanks