0

I have a list of items I'd like to have in columns next to each other. I don't know how many items there will be so I can't have a fixed height. I want them to fill the space a good as possible like so:

#parent {
  background-color: firebrick;
  max-height: 200px; /* <-- eliminate */
  display: flex;
  flex-flow: column wrap;
}

.child {
  background-color: #fff;
  height: 30px;
  width: 100px;
  margin: 10px;
  padding: 3px;
}
<div id="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
</div>

So I basically want the above but without the max-height on #parent but when I remove it they will just be in one wide column.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
leonheess
  • 16,068
  • 14
  • 77
  • 112
  • define *I want them to fill the space a good as possible* .. for me what you have is not *good* but this one is good: https://jsfiddle.net/fk0hc5wy/ – Temani Afif Sep 08 '20 at 13:40
  • @TemaniAfif Hey! I added a fixed width so the basic "algorithm" I imagined would be: Fit as many next to each other as possible and you have the number of columns. Then fill those columns from left to right as equally as possible. But I am open to other ideas as well. – leonheess Sep 08 '20 at 13:43

1 Answers1

1

columns can do this:

#parent {
  background-color: firebrick;
  column-width:120px; /* set the width of columns and the number will be automatic */
  column-gap: 20px; /* to replace margin between element */
  padding:0 10px;
}

.child {
  background-color: #fff;
  height: 30px;
  display:inline-block; /* use inline-block because block element are buggy */
  width:100%; /* make them full width so they behave like block */
  margin:10px 0; /* keep only top and bottom margin */
  padding: 3px;
  box-sizing:border-box;
}
<div id="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Is there a way of selecting the bottom children (last "row") via CSS? They have padding in my case but I would like to have no extra padding at the bottom – leonheess Sep 10 '20 at 14:10