Row and Column input picker
You're using calc() when there's no need for it because you already know the size of the parent element and you're not mixing units.  You're also not providing a fallback for browsers that don't support calc(), which in turn makes your entire demo appear as though it doesn't work.

.grid-chooser + .grid .row {
    height: 23px;
}
.grid-chooser + .grid .square {
    height: 100%;
    width: 23px;
}


If you want to be able to change the size of your picker without having to recalculate the sizes of the descendant elements, you should be using variables via CSS preprocessors.  In addition to increasing your browser support, you'll also have a marginally smaller file.

You're using display: inline-block here when float: left would be a better choice.  Using negative margins to remove the space between inline elements is not reliable under any circumstance, ever.

.grid-chooser + .grid .square {
    float: left;
    padding: 1px;
}


You can eliminate need for the .inner element using this CSS (you'll need to modify your JS to match):

.grid-chooser + .grid {
    width: 120px;
    height: 120px;
    background: rgba(0, 0, 0, 0.2);
    position: relative;
    padding: 2px;
}
.grid-chooser + .grid .row:first-child .square:first-child {
    background: rgba(0, 0, 0, 0.4);
}
.grid-chooser + .grid .square {
    height: 22px;
    width: 22px;
    float: left;
    margin: 1px 0 0 1px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.2);
}
.grid-chooser + .grid .square:hover,
.grid-chooser + .grid .square.highliger {
    background: rgba(0, 0, 0, 0.4)
}