Styling DIVs to close vertical gaps

Question

I'm in need of a solution to remove vertical spaces between DIVs using css or jquery if applicable.

The css currently applied to the divs don't have top nor bottom padding or margins. But divs with more content create undesired gaps in neighbouring divs. The following image illustrates what I mean:

Box 2 creates gaps after Boxes 1 and 3.

I'm trying to find a good solution which would move Boxes 4 and 6 into those gaps.

Thanks in advance for any assistance.

UPDATE:

Apologies for not including markup and styling code. I didn't do so because it's part of a very complex site. Below I added the first of 6 markup i:e Box 1. Simply repeat 5 more times. The styling code below it is the best I can do without overwhelming with hundreds of lines of code.

<div class="grid-container campaign-board">

    <div class="grid-x grid-margin-x">
        <div class="views-row cell small-6 medium-4">
            <div data-history-node-id="1241" role="article" class="contextual-region node node--type-campaign-board node--promoted node--view-mode-teaser campaign-board__item" about="/node/1241">
            <div class="campaign-board__title">
                <span class="field field--name-title field--type-string field--label-hidden">Box 1</span>
            </div>
            <div class="campaign-board__company"></div>
            <div class="campaign-board__name">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
            </div>
            </span>
        </div>
    </div>
.
.
.
</div>


.campaign-board{
    padding-bottom: $global-padding * 3;
  }
    div.grid-x.grid-margin-x{
      border: 1px solid green;
    }
    div.views-row{
      border: 1px solid red;
    }
    .campaign-board__item{
      margin-bottom: $global-margin;
    }
      .campaign-board__title{
        color: get-color(june);
        font-size: rem-calc(16);
      }
      .campaign-board__company,
      .campaign-board__name{
       font-size: rem-calc(14);
       font-weight: 500;
       color: get-color(december);
      }

You're probably looking for a Masonry layout: https://masonry.desandro.com/ — Jon Uleis, Oct 15 '19 at 02:39
Unfortunately, without access to your markup and CSS I don't think there's many options for the community to provide you with meaningful assistance. — Alexander Nied, Oct 15 '19 at 03:32

nazifa rashid · Answer 1 · 2019-10-15T04:44:37.963

* {
  margin: 0; 
  padding: 0;
}

.wrapper {
  display: flex;
}

.row {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
}

.col {
  border: 1px solid red;
  padding: 20px 15px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <div class="row">
    <div class="col">
      Lorem Ipsum is simply dummy text 
    </div>
    <div class="col">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </div>
  </div>
  
  <div class="row">
    <div class="col">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </div>
    <div class="col">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </div>
  </div>
  
  <div class="row">
    <div class="col">
      Lorem Ipsum is simply dummy text of the printing
    </div>
    <div class="col">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </div>
  </div>
</div>
</body>
</html>

I hope it'll help.

For reference go through the below links

check now! If you want to eliminate the gap then don't keep in the row * justify-content: space-between;* — nazifa rashid, Oct 15 '19 at 04:45

score 0 · Answer 2 · answered Oct 15 '19 at 03:50

Since you are using rows and cols, I would assume that you are using some form of Bootstrap. If that is indeed the case, bootstrap has classes to help with that.

row align-items-start

Will align items at the top

row align-items-center

Will align center...etc for a complete reference list https://getbootstrap.com/docs/4.3/layout/grid/#vertical-alignment

Styling DIVs to close vertical gaps

2 Answers2