Filling vertical white-space of floated elements

Question

Is there a way to fill in the vertical white space between rows of elements with pure css?

You'll see below in my snippet that the floated elements have space in between them vertically, which I have made red. I've tried csscolumns, flexbox, cssgrid, floating, tables and I still can't get them to fill the vertical space.

Has anyone seen or know of a way to fill this vertical space with css?

.container {
  display: block;
  background-color: red;
}
.container:after {
  display: table;
  content: "";
  clear: both;
}
.cell {
  width: 25%;
  background-color: white;
  float: left;
}

<div class="container">
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
</div>

Update:

I tried using csscolumns to achieve this but, I found that the columns will automatically try and maintain the same height and the child elements will break. I need the child elements to stay together vertically, without breaking into another column.

You can see below where the child elements break, as the green border isn't there.

.container {
  display: block;
  columns:4;
  column-gap: 0;
  background-color: red;
}
.cell {
  min-width: 40px;
  background-color: white;
  float: left;
  border:1px solid green;
}

<div class="container">
    <div class="cell">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
    </div>
    <div class="cell">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
    </div>
    <div class="cell">
      Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh.
    </div>
    <div class="cell">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
    </div>
    <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</div>
    <div class="cell">
      Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh.
    </div>
    <div class="cell">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
    </div>
    <div class="cell">
      Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh.
    </div>
  </div>

VXp · Accepted Answer · 2018-09-04T07:30:50.177

You can do it with the CSS columns:

.container {
  column-count: 4; /* each 25% */
  column-gap: 5px; /* horizontal gap, adjust to your needs */
}

.cell {
  margin-bottom: 5px; /* for better presentation, adjust to your needs */
  page-break-inside: avoid; /* mandatory */
  break-inside: avoid-column; /* mandatory */
  background: Lavender;
}

<div class="container">
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
  <div class="cell">
    Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
  </div>
</div>

Filling vertical white-space of floated elements

Update:

1 Answers1