List items in grid columns


I’m trying to display list items like grid .

For example i have a html like


and i’m expecting it to be displayed as


Note : hyphen indicates space

Is it possible using css3 . Can anyone help me on this.

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

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

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

<!DOCTYPE html>
<html lang="en">
<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 */

Support info


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

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

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

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