Remove whitespace between rows on wrapped Flexbox

Question

I am looking to remove whitespace between rows on a horizontal list flexbox. I am essentially doing a a-z list and i want it to be without the space below.

Here is what ive done:

#example 
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color:#555;
  color: white;
}
#example ol
{
    display:flex;
    /*justify-content: center;
    justify-content: space-between;
    flex: 1 ;*/
    flex-shrink: 0;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items:flex-start;
    /*align-self: center;*/
    /*align-content:flex-start;*/


}
#example ol li::marker
{
    margin-right:5px; 

}
#example ol li
{
    color:white;
    font-size:40px; 
    list-style-position:inside;
    margin-bottom: 20px;
}
#example ul li
{
    color:white;
    font-size:20px;
    margin-bottom:20px;
}

Whitespace between list items

Thanks in advance

Can you add the html to your post so the issue can be reproduced? — jeh, Feb 02 '20 at 18:40

score 0 · Answer 1 · answered Feb 02 '20 at 18:44

I'm not sure what the original HTML markup looks like, but I notice that if the whitespace is deleted, you don't retain the original grid since each element's height is now content-fitted.

If this is what you intend, I might suggest either 1) making all child elements inline so they collapse and fill up only necessary space, or 2) if the content in the columns stay the same even when the viewport changes, that each column is placed in its own container and then given a min-height.

score 0 · Accepted Answer · answered Feb 02 '20 at 18:48

Maybe I'm wrong, but I don't think that you can achieve this with flex. You can try with float: left; on children but you still end up with that space below the content in some places.

You can look up for the Masonry layout solution in JS.

Or you can use column-count: 3; it will remove those white spaces, but it will work like this:

A D G
B E H
C F J

(from the top to the bottom like in a newspaper)

I've added those two rules in the ul to block the division of those blocks between columns.

  display: inline-block;
  width: 100%;

.wrapper {
  column-count: 3;
}

.wrapper ul {
  display: inline-block;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
}

<div class="wrapper">
  <ul>
    <li>List 1 - child</li>
    <li>List 1 - child</li>
    <li>List 1 - child</li>
    <li>List 1 - child</li>
    <li>List 1 - child</li>
    <li>List 1 - child</li>
  </ul>
  <ul>
    <li>List 2 - child</li>
    <li>List 2 - child</li>
    <li>List 2 - child</li>
  </ul>
  <ul>
    <li>List 3 - child</li>
    <li>List 3 - child</li>
    <li>List 3 - child</li>
    <li>List 3 - child</li>
    <li>List 3 - child</li>
  </ul>
  <ul>
    <li>List 4 - child</li>
    <li>List 4 - child</li>
    <li>List 4 - child</li>
    <li>List 4 - child</li>
    <li>List 4 - child</li>
  </ul>
  <ul>
    <li>List 5 - child</li>
    <li>List 5 - child</li>
    <li>List 5 - child</li>
  </ul>
  <ul>
    <li>List 6 - child</li>
    <li>List 6 - child</li>
  </ul>
  <ul>
    <li>List 7 - child</li>
    <li>List 7 - child</li>
    <li>List 7 - child</li>
    <li>List 7 - child</li>
    <li>List 7 - child</li>
  </ul>
  <ul>
    <li>List 8 - child</li>
    <li>List 8 - child</li>
    <li>List 8 - child</li>
    <li>List 8 - child</li>
  </ul>
  <ul>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
    <li>List 9 - child</li>
  </ul>
  <ul>
    <li>List 10 - child</li>
    <li>List 10 - child</li>
  </ul>
</div>

Remove whitespace between rows on wrapped Flexbox

2 Answers2