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.

<div style="height:800px;">
    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
    </ul>
</div>

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.

Fiddler

techneblog.com/article/creating-responsive-multiple-column-list might be what you are looking for - demo: codepen.io/ThiefMaster/full/afGbB (resize the window) – Koan

Answer 1

This can be done using CSS3 columns quite easily. Here's an example, HTML:

#limheight {
    height: 300px; /*your fixed height*/
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}

#limheight li {
    display: inline-block; /*necessary*/
}

<ul id = "limheight">
 <li><a href="">Glee is awesome 1</a></li>
 <li><a href="">Glee is awesome 2</a></li>
 <li><a href="">Glee is awesome 3</a></li>
 <li><a href="">Glee is awesome 4</a></li>    
 <li><a href="">Glee is awesome 5</a></li>
 <li><a href="">Glee is awesome 6</a></li>
 <li><a href="">Glee is awesome 7</a></li>
 <li><a href="">Glee is awesome 8</a></li>
 <li><a href="">Glee is awesome 9</a></li>
 <li><a href="">Glee is awesome 10</a></li>
 <li><a href="">Glee is awesome 11</a></li>
 <li><a href="">Glee is awesome 12</a></li>    
 <li><a href="">Glee is awesome 13</a></li>
 <li><a href="">Glee is awesome 14</a></li>
 <li><a href="">Glee is awesome 15</a></li>
 <li><a href="">Glee is awesome 16</a></li>
 <li><a href="">Glee is awesome 17</a></li>    
 <li><a href="">Glee is awesome 18</a></li>
 <li><a href="">Glee is awesome 19</a></li>
 <li><a href="">Glee is awesome 20</a></li>
</ul>

Teston

caniuse.com/#feat=multicolumn - hopefully your audience allows you to use it anyway; it's clearly the best solution. You could also add a shim for older browsers - google spits out csscripting.com/css-multi-column; haven't tested it though – Koan

@Koan Yeah, if older-browsers support is required, I think JavaScript would be the only way to achieve this. – Teston

Thank you very much! This is clearly what Im looking for. Also, thank you ThiefMaster for the cross-browser compatibility solution. – Fiddler

Seems display: inline-block; for li is not needed here. – Cykana

Resizing doesn't work. The column items don't change columns. Besides that - even worse - if the page gets wider than 6x item size, two successive items (1 and 2) are displayed next to eachother on the same line in column 1, then on the next line 3 and 4, etc. You need to add some horizontal padding to the <li> to get this clear. The problem it the inline-block. Remove that and you get three columns (in Firefox and Chrome at least). – Artois

Here is an updated version: jsfiddle.net/Fa722/270 . Also I notice that if the number of elements is not divisible by the number of columns, it shakes when you re-size the window. (this will work for you @SPRBRN) – Onida

Can anyone please help to arrange Glee awesome 1 ,glee awesome 2 ,glee awesome 3 etc. horizontally the same way using column-count property? – Shamus

You may need width: 100% for the <li> if there are some "very short sentences" there. – Possibly

Answer 2

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.

ul{margin:0; padding:0;}

#native {
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  -o-column-width: 150px;
  -ms-column-width: 150px;
  column-width: 150px;
  
  -webkit-column-rule-style: solid;
  -moz-column-rule-style: solid;
  -o-column-rule-style: solid;
  -ms-column-rule-style: solid;
  column-rule-style: solid;
}

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

Artois

can you make a JSFiddle or CodePen so we can play with it ? – Onida

can't believe such a valid answer never received a single vote. – Abeokuta

Answer 3

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);

Portie

Answer 4

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.

Punchball

Answer 5

Use column-width property of css like below

<ul style="column-width:135px">

Spithead

Answer 6

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

Zinovievsk

Answer 7

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

<div id="cols">
    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
    <li>List item 6</li>
    <li>List item 7</li>
    <li>List item 8</li>
    <li>List item 9</li>
    <li>List item 10</li>
    <li>List item 11</li>
    <li>List item 12</li>
    <li>List item 10</li>
    <li>List item 11</li>
    <li>List item 12</li>
   
    </ul>
</div> 

Check demo : https://codepen.io/pen/

Stickler