Unix `ls` command style in CSS3

Question

I am trying to get a very similar result of unix command ls in the browser in terms of the arrangement of the items.

Is there any suggestion based on the image below?

While width of the columns depends on the length of the text in that column, number of columns depends on the width of the window.

Answer 1

CSS3 has a new property: column-count and it does exactly what ls does (provided you take care of the line breaks, of course). Just use it on your container element, define the size and you're good to go. You can also use column-gap to specify the gap between them.

Read more about it here: http://css-tricks.com/almanac/properties/c/columns/