2

I want columns width to be dynamic.

article{
 columns: 2;
 width: 100%;
}

div{ border: 1px solid red; }
<article>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
</article>
As seen above, both columns have the exact same width, regardless of the items' text length inside the each of the columns.

Is it possible make the columns width uneven in a way that if the first column (or columns) have short-length text items, the column itself will be short, according to the maximum content length in that column?

Restrictions:

  1. order of the items must remains logical (top-to-bottom).
  2. Container's height & width are dynamic.
  3. HTML should remain as a flat list of nodes
  4. Arbitrary number of child nodes

Thanks

This is for a client of mine which asks to change the a column so it won't have so much whitespace, so the other columns, where, and if, items are longer, would have more space for their text.

It is indeed a "waste" of space, and that extra whitespace could be used for longer texts, which is completely a reasonable demand by the client.

These lists are from a common React Component used everywhere around the code so this is why I cannot make much modifications to the markup as it will create problems in other places.

Community
  • 1
  • 1
vsync
  • 118,978
  • 58
  • 307
  • 400
  • 1
    Isn't better to use flexbox in this case? – Lukas J. Jun 03 '20 at 15:04
  • it's impossible with flexbox as far as I know, I've tried. I'm asking if somebody knows a trick that works **with columns** because that's optimal for my client – vsync Jun 03 '20 at 15:15
  • 1
    technically all the column should have the same width in a multi column layout: https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm I don't think you have a chance with columns – Temani Afif Jun 03 '20 at 15:31
  • @TemaniAfif - Excellent, This is what I wanted. I opened this question so others who face the same issue would have a place to discuss this. I had the feeling this is unsolvable by-spec. Thanks. – vsync Jun 03 '20 at 16:04
  • I think there is room for improvement in `columns` spec to add a CSS property to control just that, since the benefit is obvious and alternative implementation methods are very complex, if not impossible. – vsync Jun 03 '20 at 16:19
  • @LukasJ. - as you can [see here](https://stackoverflow.com/q/27119691/104380) it isn't easy to do, and especially when I want to always have 2 columns, regardless of children count – vsync Jun 03 '20 at 19:10

0 Answers0