How to implement a multi-column list similar to WinForm in HTML?-CodePudding

I want to achieve the following effect in HTML: Desired effect Like this:

1        6        11
2        7        12
3        8        13
4        9        14
5        10       15

Elements may vary in height, if the first column can't show all the elements, I want the extra elements to be shown in the second column, and so on. (horizontal scroll if it exceeds width) The number of elements and their contents are not fixed.

I didn't find anything related online. Hope that solves it, thanks.

CodePudding user response：

Just use column-count-property to the wrapping parent element:

.container {
  column-count: 3;
}

<div >
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

CodePudding user response：

From my comment and to complete @tacoshy answer:

column-width height will allow horizontal overflow https://jsfiddle.net/0um5ra2w/ -|- https://developer.mozilla.org/en-US/docs/Web/CSS/columns . column-count will only draw a fixed amount of columns :)

ul{
  column-width:200px;
  height:5em;
  overflow:auto;
  
  /*demo purpose*/
  counter-reset:spans;
}
li:before{
  counter-increment:spans;
  content:counter(spans);
}

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CodePudding user response：

You can find something here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items

.box {
    height: 300px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.box>* {
    flex: 1 1 80px;
}

For an HTML like

   <div >
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
    <div>Seven</div>
    <div>Eight</div>
    <div>Nine</div>
    <div>Ten</div>
  </div>