How can I make wrapped list columns all the same width?

Question

When the list items reach to the bottom of container next items show in the next column. In this case container width divide between 3 columns. How can I change column width? i want change column width manually not like the result (automatic divide container width between column)

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  background: pink;
  border: 1px solid #fff;
}

<ul>
  <li><a href="">this is row</a></li>
  <li><a href="">this is a longer row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
</ul>

and result:

I revised your post title into a specific question. Please revise further if it's not accurate, but your question wasn't initially clear. — isherwood, May 31 '22 at 18:10
Does this answer your question? [How to make flexbox items the same size?](https://stackoverflow.com/questions/29503227/how-to-make-flexbox-items-the-same-size) — isherwood, May 31 '22 at 18:11
i want change column width manually not like the result (automatic divide container width between column) — Mousa Najafi, May 31 '22 at 18:20

score 0 · Answer 1 · edited May 31 '22 at 18:06

The column width is being reflected from the width of your lis. With that being said, you can change the column width by changing the width on li.

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  width: calc(100%/3);
  border: solid 1px orange;
}

<ul>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
  <li><a href="">this is row</a></li>
</ul>

I recommend solutions based on flexbox rather than width calculation. This is more flexible where column count changes. — isherwood, May 31 '22 at 18:17

score 0 · Answer 2 · answered Jun 01 '22 at 09:31

You can divide like this - 100/12. If you divide 100 by 12 we get 8.333333333333333. Now you can just multiply into 4 then you will get the value for 3 equal columns.

For example: 8.333333333333333 * 4 = 33.33333333333333.

Finally just add percentage like this - 33.33%

In your case your CSS should look like this:

    * {
        /*to adjust paddings on columns. you can learn more about box-model in css*/
        box-sizing: border-box;
    }
    
    ul {
        display: flex;
/*no need to make flex direction : column. by default it applies row value and this will work fine.*/
        /* flex-direction: column; */
        flex-wrap: wrap;
/*currently no need of max-height. It is optional depends on your design.*/
        /* max-height: 200px; */
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    li {
        background: pink;
        border: 1px solid #fff;
        /*0 is grow 0 is shrink 33.33% is basis*/
        flex: 0 0 33.33%;
    }

I hope this helps.

score -1 · Answer 3 · edited May 31 '22 at 19:42

-1

You can change the column width by adding

width: 100px;

or whatever width you want to specify in the ul selector in your css

edited May 31 '22 at 19:42

Kameron

10,240
4
13
26

answered May 31 '22 at 18:02

Pabulum

1
1

2

`ul` does not reflect the width of each column in this instance. The `ul` reflects the width of the entire row. – Kameron May 31 '22 at 18:03
1

Fixed widths are not usually ideal in a responsive web. – isherwood May 31 '22 at 18:07

How can I make wrapped list columns all the same width?

3 Answers3