如何使用grid-template-columns

Question

我试图以这种方式动态组织网格：

但我的结果却是那个。请注意我突出显示的黑色条纹，因为正好在那里图像占据了与其大小不对应的空间我该如何解决这个问题，而且我的图像与上面的例子相同？

我的代码html：

    <div class="col-md-12 col-lg-12" id="container">

        <div class="grid col-md-3 col-lg-3 col-sm-6 col-xs-12 col-md-25">
            <div class="imagem">
                <img class="img-responsive" src="Image path">
            <div class="layers">
                <a class="info test-popup-link" href="Image path">
                <img src="path magnifying glass"></a>
            </div>
            </div>
        </div>
    </div>

我的css代码：

    #container{
       padding-left: 0;
       padding-right: 0;
       display: grid;
       grid-template-columns: auto auto auto auto auto auto;
    }

    .grid{
       width: 100%;
       padding-right: 2px;
       padding-left: 2px;
    }

    .imagem{
       width: 100%;
       height: 100%;
       margin-top: 4px;
       min-width: 0rem;
       float: left;
       overflow: hidden;
       background-color: #000;
       position: relative;
       text-align: center;
       cursor: default;
       margin-bottom: 0;
       box-shadow: none;
       border: none;
    }
    .img-responsive{
       display: block;
       max-width: 100%;
       height: auto;

    }
    .layers{
       width: 100%;
       height: 100%;
       position: absolute;
       background-color: rgba(0,0,0,0.5);
       top: 0;
       opacity: 0;
       transition: all .2s ease-in-out;
    }

   .info{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -25px;
      margin-top: -25px;

   }

示例jsfiddle： https://jsfiddle.net/3gj7acf8/