List items in grid columns

HTML & CSS
1

Hi,

I’m trying to display list items like grid .

For example i have a html like

<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.

2

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

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

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

<!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>&#8203;
</body>
</html>

Support info

Edit:

Pipped by Richard, and forgot you wanted 3 columns. :smiley:

4

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

5

Aye, right you are, our Richard. Let’s call it draw then, shall we? :slight_smile:

6

Thanks a lot, exactly what i was looking for :).