How can I keep item-count (dynamic) from breaking inside CSS columns?

Question

There's column-count, but I'm wondering is there such thing as "item-count" for items inside a CSS column? I'm having trouble trying to keep the number of items fixed in my 3 Column FAQs without specifying height to the column itself.

In this example, I would like for each column to have 3 items, no matter how long the question or answer in each item is. In the actual site, I won't know the exact number of items so I'd just like to keep them "balanced".

You can see that I tried using flexbox but the answer panel will hold dynamic content (same goes with the number of questions/items). My aim is to make it look like a masonry-layout whenever the answer panel(s) is/are displayed.

.m-faqs {
  /*display: flex;
  flex-flow: row wrap;
  justify-content: space-between;*/
  column-count: 3;
  column-gap: 50px;
}

.m-faqs_item {
  margin-bottom: 20px;
  position: relative;
  /*flex: 0 0 47%;
  align-self: baseline;*/
  display: inline-block;
  break-inside: avoid;
  width: 100%;
}

.m-faqs_title {
  margin-top: 0;
  margin-bottom: 0;
}

.m-faqs_question {}

.m-faqs_question-link {
  display: inline-block;
}

.m-faqs_answer {}

.m-faqs_item.active .m-faqs_answer {
  display: block;
}

<div class="m-faqs">
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p> 
    </div>
  </div>
</div>

You want to have 3 columns of 3 items each? So you know that number of items is fixed and equals 9? — JoannaFalkowska, Aug 02 '17 at 09:00
@Senthe Yes but this is just an example. As I said above, "In the actual site, I won't know the exact number of items so I'd just like to keep them "balanced".The example shows that the 2nd column only has 2 items while the 3rd one has 4. That's because the 2nd item on the 2nd column has so much content that it pushed the 3rd item onto the next column. This is what I'm trying to avoid. — Carlo, Aug 02 '17 at 12:59
@AbdullahDanyal CSS is preferable but I would really appreciate it if you show me how it can be done with JS. — Carlo, Aug 02 '17 at 13:01
So do you have unknown number of items, columns and rows? Or is number of columns always going to be 3? — JoannaFalkowska, Aug 02 '17 at 13:35

score 0 · Answer 1 · answered Aug 03 '17 at 08:34

When using column-count, the available space is distributed for the given amount of text, not the given amount of items. When container has no specified height, the text will be distributed evenly, so if longer question takes more space, in the next column that space can be given to two questions, like we can see in your example.

There are several workarounds:

The simplest and most effective would be to either render HTML that has items divided into 3 containers, or use JS code that would count all items and wrap them into containers. Each container would then be a column that behaves exactly as you described.
Use grid. The downside is that it doesn't have great browser coverage, and it won't look exactly like you probably expect it to:

.m-faqs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 50px;
}

.m-faqs_item {
  margin-bottom: 20px;
}

<div class="m-faqs">
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
</div>

The same displaying problem goes for flex solution, except flexbox has better coverage and can be safely used for all browsers.

.m-faqs {
  display: flex;
  flex-wrap: wrap;
}

.m-faqs_item {
  width: calc((100% - 150px)/3);
}
.m-faqs_item:nth-of-type(3n), .m-faqs_item:nth-of-type(3n + 2) {
  margin-left: 50px;
}

<div class="m-faqs">
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
</div>

Other than that, I don't think there are any satisfying CSS solutions.

score 0 · Answer 2 · answered Jun 14 '23 at 13:45

0

If your container has

column-count: *numeric*

Set your items inside the container to

break-inside:avoid

For backwards compatibility

page-break-inside:avoid;
-moz-column-break-inside:avoid;
break-inside:avoid

answered Jun 14 '23 at 13:45

miiimooo

91
1
5

How can I keep item-count (dynamic) from breaking inside CSS columns?

2 Answers2

Linked