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>

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.

http://techneblog.com/article/creating-responsive-multiple-column-list might be what you are looking for - demo: http://codepen.io/ThiefMaster/full/afGbB (resize the window) — ThiefMaster, Sep 08 '12 at 16:38

score 112 · Accepted Answer · edited Apr 30 '18 at 22:08

112

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>

edited Apr 30 '18 at 22:08

Soviut

88,194
49
192
260

answered Sep 08 '12 at 16:39

Chris

26,544
5
58
71

4

http://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 http://www.csscripting.com/css-multi-column/; haven't tested it though – ThiefMaster Sep 08 '12 at 16:42
@ThiefMaster Yeah, if older-browsers support is required, I think JavaScript would be the only way to achieve this. – Chris Sep 08 '12 at 16:47
Thank you very much! This is clearly what Im looking for. Also, thank you ThiefMaster for the cross-browser compatibility solution. – Grozav Alex Ioan Sep 08 '12 at 16:50
8

Seems `display: inline-block;` for `li` is not needed here. – Dmitry Nov 09 '13 at 19:23
1

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 `
` to get this clear. The problem it the `inline-block`. Remove that and you get three columns (in Firefox and Chrome at least).

SPRBRN

Apr 15 '14 at 12:46

1

Here is an updated version: http://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) – Francisco Corrales Morales Sep 17 '14 at 17:52

Can anyone please help to arrange Glee awesome 1 ,glee awesome 2 ,glee awesome 3 etc. horizontally the same way using column-count property? – monisha Oct 25 '17 at 07:16

You may need `width: 100%` for the `

` if there are some "very short sentences" there.

– Anh-Thi DINH Nov 28 '20 at 16:16

score 24 · Answer 2 · edited Jan 30 '17 at 15:44

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>

can't believe such a valid answer never received a single vote. — r3wt, Oct 13 '15 at 04:29

score 4 · Answer 3 · answered Jul 28 '14 at 13:10

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

score 2 · Answer 4 · answered Jul 03 '17 at 10:12

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.

score 2 · Answer 5 · answered Jun 08 '18 at 19:09

2

Use column-width property of css like below

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

answered Jun 08 '18 at 19:09

Siddhartha

1,473
14
10

score 1 · Answer 6 · answered Sep 08 '20 at 15:09

1

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

answered Sep 08 '20 at 15:09

20B2

2,011
17
30

score 0 · Answer 7 · answered Dec 29 '20 at 04:24

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/

How to display list items as columns?

7 Answers7

Linked

Related