List items in grid columns

**tomalex0** · Dec 20, 2012 04:23

Hi,

I'm trying to display list items like grid .

For example i have a html like

Code:

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>

and i'm expecting it to be displayed as

1.A--4.D--7.G
2.B--5.E
3.C--6.F

Note : hyphen indicates space

Is it possible using css3 . Can anyone help me on this.
http://jsfiddle.net/jpDJj/

**RichardAskew** · Dec 20, 2012 06:03

Yep, place a div around the list and use the following CSS

HTML Code:

.list{
   -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;}

http://jsfiddle.net/jpDJj/4/

**ralph.m** · Dec 20, 2012 06:03

Bearing in mind that CSS3 is not fully supported, you can do it like this:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>split list</title>
	
<style media="all">
ul {
-moz-column-count: 2; /* For FireFox */
-webkit-column-count: 2; /* For Safari/Chrome */
column-count: 2; /* For when the standard gets fully supported */
}
</style>
	
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</body>
</html>

Support info

Edit:

Pipped by Richard, and forgot you wanted 3 columns.

**RichardAskew** · Dec 20, 2012 06:22

Originally Posted by ralph.m

Bearing in mind that CSS3 is not fully supported, you can do it like this:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>split list</title>
	
<style media="all">
ul {
-moz-column-count: 2; /* For FireFox */
-webkit-column-count: 2; /* For Safari/Chrome */
column-count: 2; /* For when the standard gets fully supported */
}
</style>
	
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</body>
</html>

Support info

Edit:

Pipped by Richard, and forgot you wanted 3 columns.

Aye but you don't need my div around it.