How to display list items as columns

Question

I m trying to build my first responsive layout  I want to display list items in a vertical line  depending on width    lt div style  height 800px   gt       lt ul gt          lt li gt 1 lt  li gt          lt li gt 2 lt  li gt          lt li gt 3 lt  li gt          lt li gt 4 lt  li gt          lt li gt 5 lt  li gt          lt li gt 6 lt  li gt          lt li gt 7 lt  li gt       lt  ul gt   lt  div gt     1   5 2   6 3   7 4   If the browser gets resized  I want it to become   1  4  7 2  5 3  6   Can someone help me  I ve been trying for hours and I can t get anything  I ve tried using tables but I can t do it like that either

User · Answer

If you take a look at the following example - it uses fixed width columns, and I think this is the behavior requested.

http://www.vanderlee.com/martijn/demo/column/

If the bottom example is the same as the top, you don't need the jquery column plugin.

_x000D_

ul{margin:0; padding:0;}_x000D_
_x000D_
#native {_x000D_
  -webkit-column-width: 150px;_x000D_
  -moz-column-width: 150px;_x000D_
  -o-column-width: 150px;_x000D_
  -ms-column-width: 150px;_x000D_
  column-width: 150px;_x000D_
  _x000D_
  -webkit-column-rule-style: solid;_x000D_
  -moz-column-rule-style: solid;_x000D_
  -o-column-rule-style: solid;_x000D_
  -ms-column-rule-style: solid;_x000D_
  column-rule-style: solid;_x000D_
}

_x000D_

<div id="native">_x000D_
  <ul>_x000D_
    <li>1</li>_x000D_
    <li>2</li>_x000D_
    <li>3</li>_x000D_
    <li>4</li>_x000D_
    <li>5</li>_x000D_
    <li>6</li>_x000D_
    <li>7</li>_x000D_
    <li>8</li>_x000D_
    <li>9</li>_x000D_
    <li>10</li>_x000D_
    <li>11</li>_x000D_
    <li>12</li>_x000D_
    <li>13</li>_x000D_
    <li>14</li>_x000D_
    <li>15</li>_x000D_
    <li>16</li>_x000D_
    <li>17</li>_x000D_
    <li>18</li>_x000D_
    <li>19</li>_x000D_
  </ul>_x000D_
</div>

_x000D_

User · Answer

You can use flex as below   parent-container       display  flex      flex-direction  column      flex-wrap  wrap      max-height  100px     Adjust max-height property as per need to generate another columns

User · Answer

Thank you for this example  SPRBRN  It helped me  And I can suggest the mixin  which I ve used based on the code given above     multi-column-list  fixed columns width     mixin multi-column-list  column-width   column-rule-style      -webkit-column-width   column-width    -moz-column-width   column-width    -o-column-width   column-width    -ms-column-width   column-width    column-width   column-width     -webkit-column-rule-style   column-rule-style    -moz-column-rule-style   column-rule-style    -o-column-rule-style   column-rule-style    -ms-column-rule-style   column-rule-style    column-rule-style   column-rule-style       Using       include multi-column-list 250px  solid

User · Answer

You can do that using CSS3   Here is the HTML code snippet    x000D   x000D   lt ul id  listitem ascolun  gt  x000D    lt li gt 1 lt  li gt  x000D    lt li gt 2 lt  li gt  x000D    lt li gt 3 lt  li gt  x000D    lt li gt 4 lt  li gt      x000D    lt li gt 5 lt  li gt  x000D    lt li gt 6 lt  li gt  x000D    lt li gt 7 lt  li gt  x000D    lt li gt 8 lt  li gt  x000D    lt li gt 9 lt  li gt  x000D    lt li gt 10 lt  li gt  x000D    lt li gt 11 lt  li gt  x000D    lt li gt 12 lt  li gt      x000D   lt  ul gt  x000D   x000D   x000D     amp  Here is the CSS3 code snippet     x000D   x000D   listitem ascolun ul margin 0 padding 0 list-style none   x000D   x000D   listitem ascolun   x000D      height  500px    x000D      column-count  4  x000D   -webkit-column-count  4  x000D   -moz-column-count  4  x000D    x000D   x000D   listitem ascolun li   x000D      display  inline-block  x000D    x000D   x000D   x000D

User · Answer

Create a list with as many list elements as you want  Then enclose the list in a div  setting style column-width and style column-gap  to match the information in your list elements  Do not set style columns  Totally responsive list that adapts to screen size  No plugins required

User · Answer

Use column-width property of css like below    lt ul style  column-width 135px  gt

User · Answer

CSS   cols       -moz-column-count  3      -moz-column-gap  20px      -webkit-column-count  3      -webkit-column-gap  20px      column-count  3      column-gap  20px     HTML  lt div id  quot cols quot  gt       lt ul gt       lt li gt List item 1 lt  li gt       lt li gt List item 2 lt  li gt       lt li gt List item 3 lt  li gt       lt li gt List item 4 lt  li gt       lt li gt List item 5 lt  li gt       lt li gt List item 6 lt  li gt       lt li gt List item 7 lt  li gt       lt li gt List item 8 lt  li gt       lt li gt List item 9 lt  li gt       lt li gt List item 10 lt  li gt       lt li gt List item 11 lt  li gt       lt li gt List item 12 lt  li gt       lt li gt List item 10 lt  li gt       lt li gt List item 11 lt  li gt       lt li gt List item 12 lt  li gt           lt  ul gt   lt  div gt    Check demo   https   codepen io pen

User · Answer

This can be done using CSS3 columns quite easily  Here s an example  HTML    x000D   x000D   limheight   x000D      height  300px    your fixed height   x000D      -webkit-column-count  3  x000D         -moz-column-count  3  x000D              column-count  3    3 in those rules is just placeholder -- can be anything   x000D    x000D   x000D   limheight li   x000D      display  inline-block    necessary   x000D    x000D   lt ul id    limheight  gt  x000D    lt li gt  lt a href    gt Glee is awesome 1 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 2 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 3 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 4 lt  a gt  lt  li gt      x000D    lt li gt  lt a href    gt Glee is awesome 5 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 6 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 7 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 8 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 9 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 10 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 11 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 12 lt  a gt  lt  li gt      x000D    lt li gt  lt a href    gt Glee is awesome 13 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 14 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 15 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 16 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 17 lt  a gt  lt  li gt      x000D    lt li gt  lt a href    gt Glee is awesome 18 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 19 lt  a gt  lt  li gt  x000D    lt li gt  lt a href    gt Glee is awesome 20 lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

[css] How to display list items as columns?

Examples related to css

Examples related to list

Examples related to listview

Examples related to vertical-alignment