如何消除CSS网格第二列中的间隙?

我在简单的CSS列中遇到了困难。这是它的样子:

html:

<div class=“catalogue container”>

<div class=“catalogue item”>
<img src=“blabla.jpg”/>
&L/DIV & GT;

<div class=“catalogue item”>
<img src=“blabla2.jpg”/>
&L/DIV & GT;

<div class=“catalogue item”>
<img src=“blabla3.jpg”/>
&L/DIV & GT;

<div class=“catalogue item”>
<img src=“blabl4.jpg”/>
&L/DIV & GT;

&L/DIV & GT;
< /代码> 

Cs:

目录容器{
-WebKit列计数:2;
-WebKit列间隙:7px;
列数:2;
柱隙:7px;
宽度:100%;
保证金:0自动;
}

.目录项{
页底:7px;
填料:0;
}
< /代码> 

我的参考号:https://codepen.io/gsarig/pen/iqhfl

我想消除差距,并将项目从第二列移到顶部。


我这里有什么东西不见了吗?如有任何帮助,我们将不胜感激。


HTML:

<div class="catalogue-container">

    <div class="catalogue-item">
        <img src="blabla.jpg" />
    </div>

    <div class="catalogue-item">
        <img src="blabla2.jpg" />
    </div>

    <div class="catalogue-item">
        <img src="blabla3.jpg" />
    </div>

    <div class="catalogue-item">
        <img src="blabl4.jpg" />
    </div>

</div>


CSS:

.catalogue-container {
    -webkit-column-count: 2;
    -webkit-column-gap: 7px;
    column-count: 2;
    column-gap: 7px;
    width: 100%;
    margin: 0 auto;
}

.catalogue-item {
    margin-bottom: 7px;
    padding: 0;
}


我的参考文献:https://codepen.io/gsarig/pen/iqhfl

我想消除空白,并将项目从第二列移到顶部。

我是不是错过了什么?任何帮助都将不胜感激。