Demo:

Codepen: https://codepen.io/anon/pen/XLmXeL

Considing the following:

grid-template-columns: repeat(auto-fill, minmax(<X>px, <Y>%));
for example: grid-template-columns: repeat(auto-fill, minmax(400px, 25%));

Expected behaviour:

Items are at least Xpx (eg 400px), but at most take Y% (eg 25%) of the grid.
When Xpx is bigger than Y% (eg with grid-width 800px ->

A space between the two arguements in repeat breaks implementation. For example, repeat(auto-fit,20) will work, but repeat(auto-fit, 20) won't(Notice the space).

style: {
    .
    .
    gridTemplateColumns: repeat(auto-fit, 20)
    .
    .
}

Just add a basic form validation for the input field, very simple.