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

Question

我在简单的CSS专栏中遇到了困难。看起来是这样的：

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

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

我在这里错过了什么吗？任何帮助将不胜感激。

Answer 1

该问题可能是由于使用列时进行div换行引起的，您可以尝试将display: inline-block添加到.catalogue-item来避免这种情况。

尝试在不使用display: inline-block的情况下进行以下操作：

.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;
  border:1px solid black;
  display: inline-block;
  width: 100%;
}

<div class="catalogue-container">

  <div class="catalogue-item">
    <img src="blabla.jpg" style="height: 300px; display: block;"/>
  </div>

  <div class="catalogue-item">
    <img src="blabla2.jpg" style="height: 190px; display: block;"/>
  </div>

  <div class="catalogue-item">
    <img src="blabla3.jpg" style="height: 200px; display: block;"/>
  </div>

  <div class="catalogue-item">
    <img src="blabl4.jpg" style="height: 250px; display: block;"/>
  </div>

</div>

Answer 2

可能值得研究flexbox：

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

https://css-tricks.com/snippets/css/a-guide-to-flexbox/