How can I limit the number of columns with a responsive CSS Grid?

Question

I'm using CSS Grid layout for a blog index layout with WordPress and I have the following, which works great and is very adaptive. All I need to do now is limit the max number of columns in the grid.

.alfie-blog-grid-medium .blog-grid-wrapper {
   display:grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   grid-column-gap: 5px;
   grid-row-gap: 5px;
}  

Changing the 300px to a percentage would do the trick but doesn't seem to work.

.alfie-blog-grid-medium .blog-grid-wrapper {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}  

.alfie-blog-grid-medium .blog-grid-wrapper div {
    background:blue;
    min-height:200px;
    min-width:200px;
}  

<div class="alfie-blog-grid-medium">
    <div class="blog-grid-wrapper">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Here's a JSFiddle example: https://jsfiddle.net/0z0byLf0/