How to remove gap in second column of a CSS grid?

Question

I'm having difficulties in my simple CSS column. Here's what it looks like:

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

My reference: https://codepen.io/gsarig/pen/iqhfl

I want to remove the gap and move the items from the second column to the top.

Am I missing something here?

The code in your post is not enough to reproduce the gap problem https://jsfiddle.net/1owd5har/2/ Do you think you would be able to create an [MCVE](https://stackoverflow.com/help/mcve)? — Maximillian Laumeister, Sep 19 '18 at 01:35

score 2 · Accepted Answer · edited Sep 19 '18 at 04:06

The problem could be caused by div wrapping when using column, you can try adding display: inline-block to .catalogue-item to avoid it.

Try the following with & without 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>

This fixed my problem! Thank you! – wobsoriano Sep 19 '18 at 01:48 — wobsoriano, Sep 19 '18 at 01:48

score 0 · Answer 2 · answered Sep 19 '18 at 01:26

0

It may be worth investigating flexbox:

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

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

answered Sep 19 '18 at 01:26

MomasVII

4,641
5
35
52

How to remove gap in second column of a CSS grid?

2 Answers2