The column-count
property
To get the effect you are after, you can use column-count: <number>
:
The column-count CSS property describes the number of columns of the element.
<number>
Is a strictly positive integer describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.
How the columns display is highly customizable, you can also configure column properties using: column-width
, column-gap
, column-rule
, column-rule-width
, column-rule-style
, column-rule-color
, column-span
, column-fill
, columns
(see above linked MDN article)
Demo
ul {
-webkit-column-count: 5;
column-count: 5;
}
<ul>
<li><a href="/link.html">Link1</a>
</li>
<li><a href="/link.html">Link2</a>
</li>
<li><a href="/link.html">Link3</a>
</li>
<li><a href="/link.html">Link4</a>
</li>
<li><a href="/link.html">Link5</a>
</li>
<li><a href="/link.html">Link6</a>
</li>
<li><a href="/link.html">Link7</a>
</li>
<li><a href="/link.html">Link8</a>
</li>
<li><a href="/link.html">Link9</a>
</li>
<li><a href="/link.html">Link10</a>
</li>
</ul>