Pankaj Morajkar Pankaj Morajkar - 1 year ago 62
HTML Question

CSS: Breaking a Unordered List

I want to break a unordered list using CSS. What i currently have is this

What i require is this

Scenario after Marcus code

Here is the html

<div class="tab-content">
<div class="tab-content-block">
<div class="home-subheading">'Functional Requirement Documents'</div>
<ul style="list-style: none;">
<li><a href="
Requirement_Documents/Agent_and_Commission">'Agent and Commission'</a></li>
<li><a similar other 21 li</a></li>

Here's the CSS

tab-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
margin-left: 2.2em;
.tab-content-block {
padding: 0 1em 1em .5em;
min-width: 25%;
.tab-content-block ul li {


You can use columns only in the <ul>.

.tab-content-block ul {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;

See it working: