Ask about CSS column

Question

This is my code for CSS Column

<div id="a">
    <div class="b"></div>
    <div class="b" style="height:30px;"></div>
    <div class="b" style="height:30px;"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>
<style>
    #a {
        position: relative;
        display: block;
        background:yellow;
        width:500px;
    }

    .b {
        background:pink;
        width: 40%;
        display: inline-block;
        height:50px;
        vertical-align: top;
        margin:10px;
    }
</style>

This is the column that i want to:

how to remove the vertical gap between each column.

You can use masonry plugin https://masonry.desandro.com/ – athi Apr 05 '19 at 09:25 — athi, Apr 05 '19 at 09:25
@athi without any plugin, just pure html and css ? – My real name Apr 05 '19 at 09:25 — My real name, Apr 05 '19 at 09:25

score 0 · Accepted Answer · edited Oct 08 '19 at 12:56

0

Remove the style attribute from

 <div class="b" style="height:30px;"></div>
 <div class="b" style="height:30px;"></div>

And set margin to something less, like 3px

EDIT: if you need to change height, you need to adopt a different approach to the problem. See below.

.a {
  display: inline-block;
  background: yellow;
  width: 500px;
  width: 40%;
}

.b {
  background: pink;
  vertical-align: top;
  margin: 3px;
}

.container {
  display: inline-block;
}

<div class="contaisner">
  <span class="a">
   <div class="b">a<br>a<br>a<br>a<br></div>
   <div class="b">a<br>a<br>a<br></div>
   <div class="b">a<br>a<br>a<br>a<br></div>
  </span>
  <span class="a">
   <div class="b">a<br>a<br>a<br></div>
   <div class="b">a<br>a<br>a<br>a<br></div>
   <div class="b">a<br>a<br>a<br>a<br></div>
  </span>
</div>

This should be close enough

edited Oct 08 '19 at 12:56

athi

1,683
15
26

answered Apr 05 '19 at 09:27

Donny

516
3
9

the problem is the height of each box will be different – My real name Apr 05 '19 at 09:28
You should then make a different class where you put a different height – Donny Apr 05 '19 at 09:29
i edit my code, the height will be based on its content – My real name Apr 05 '19 at 09:32
This is not an answer @Donny. You should have put it in the comment section – athi Apr 05 '19 at 09:34
@athi no way this could be a comment. Furthermore, you commented telling him to use a plugin for this? – Donny Apr 05 '19 at 09:40
@Myrealname I edited my answer, check it and let me know if it helps you – Donny Apr 05 '19 at 09:48
You're welcome, and don't forget to mark my answer as the correct one if it solved what you were looking for – Donny Apr 05 '19 at 09:56

score -1 · Answer 2 · answered Apr 05 '19 at 09:49

You can give column-count to the outer div and add outer div to the child element. break-inside: avoid; should be given to the child elements.

<div id="a">
  <div class="b">
    <div></div>
  </div>
  <div class="b" style="height:30px;">
    <div></div>
  </div>
  <div class="b" style="height:30px;">
    <div></div>
  </div>
  <div class="b">
    <div></div>
  </div>
  <div class="b">
    <div></div>
  </div>
  <div class="b">
    <div></div>
  </div>
</div>
<style>
  #a {
    position: relative;
    display: block;
    background: yellow;
    width: 500px;
    column-count: 2;
    padding: 10px;
  }
  
  .b {
    background: pink;
    break-inside: avoid;
    height: 50px;
    margin: 10px;
  }
</style>

Ask about CSS column

2 Answers2