0

I am currently in a situation where I need to do use multi-column layout mode of css.

Basically, I am creating a mega-menu where I need to have variable list items inside unordered list.

For that I need to have four columns and if content from list items are not far enough to fit within four columns, it should just stay within one column. That's why I need to have flexible height on multi-column container.

<ul class="megamenu-list">
    <li>Item-1</li>
    <li>Item-2</li>
    <li>Item-3</li>
</ul>

and here is the css part.

.megamenu-list {
  visibility: visible;
  opacity: 1;
  column-count: 4;
  column-fill: auto;
  height: 400px;
  padding: 20px;
}

After some googling I come to know that to be able to use column-fill auto, one needs to have constrained(fixed) height on parent container which is not useful as there may be the case when there are only one or two list items within container.

I already tried that thing in my other question with flex but with no luck of getting any response.

Set flex container height to flex items content height when there are only fewer items

Now I found the below discussion at github which seems to be closed but don't know how.

https://github.com/w3c/csswg-drafts/issues/3064

Thanks.

Shashank Bhatt
  • 717
  • 1
  • 11
  • 28
  • You'll need javascript for this. CSS can't count items for you and style based on that count. – Paulie_D Sep 02 '19 at 11:34
  • Yes but after counting items what will I have? – Shashank Bhatt Sep 02 '19 at 11:36
  • You'll know whether to apply `column-count:4` or not. – Paulie_D Sep 02 '19 at 11:40
  • Without setting column-count I can't get the content into second column, so column-count is indeed necessary. – Shashank Bhatt Sep 02 '19 at 11:46
  • My point is that you only need to create a second column if you have nore than 4 items...which is why you need to count them...using javascript. – Paulie_D Sep 02 '19 at 11:48
  • Ahh you are not getting me. It is not necessary to have one item per one column. My question is that if the height of column exceeds the certain value then it should be moved to second column. There can also be three items in first column and also no item at all in second column. – Shashank Bhatt Sep 02 '19 at 11:52
  • 1
    There is no CSS method of doing that dynamically. Either you have a set number of rows or a set number of columns. – Paulie_D Sep 02 '19 at 11:58
  • This is indeed a javascript issue, or other programming language issue. you need to format the html to fit your requirements of the layout. – glend Sep 02 '19 at 13:26

0 Answers0