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

我在我的简单CSS专栏中遇到了困难。下面是它的样子：

HTML:

我的推荐人：

我想消除间隙并将项目从第二列移到顶部

---

我在这里遗漏了什么吗？

可能值得调查flexbox：

.catalogue-container {
   display: flex;
   flex-direction:column;
}

---

使用列时，问题可能是由div包装引起的，您可以尝试将

显示：内联块

添加到

。目录项

，以避免出现此问题

在不显示的情况下尝试以下操作：内联块：

.catalog容器{
-webkit列数：2；
-webkit柱间隙：7px；
列数：2；
柱间距：7px；
宽度：100%；
保证金：0自动；
}
.目录项目{
边缘底部：7px；
填充：0；
边框：1px纯黑；
显示：内联块；
宽度：100%；
}

您帖子中的代码不足以重现差距问题您认为您能够创建一个新的解决方案吗？这解决了我的问题！非常感谢。

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

.catalogue-container {
   display: flex;
   flex-direction:column;
}