如何使用响应式CSS网格限制列数？

Question

我使用CSS网格布局使用WordPress进行博客索引布局，我有以下内容，效果很好并且非常适应性强。我现在需要做的就是限制网格中的最大列数。

.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;
}  

将300px更改为百分比可以解决问题，但似乎无法发挥作用。

＆＃13;

＆＃13;

.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;
}  

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是一个JSFiddle示例：https://jsfiddle.net/0z0byLf0/