Sightly condition check

Question

Below is my code. actually i am displaying list of children (in 2 sections) on click in header navigation.

<ul class="nav navbar-nav" data-sly-list.level1="${header.mainNavPages}" >



<div class="col-md-3 col-sm-4">

<ul class="dropdown-list" data-sly-list.level2="${level1.children}">

<li data-sly-test="${level2List.index <= level1.mainNavForkIndexValue}"></li>

-----------

</ul></div>



<div class="col-md-3 col-sm-4">

<li data-sly-test="${level2List.index > level1.mainNavForkIndexValue}"></li>

----

</ul></div>

Now my requirement , i want to display same results in 3 sections, i want to segregate the list of children in 3 sections (3 divs).

Earlier 2 sections (50% in first sections and another 50% in 2nd section)

"${level2List.index <= level1.mainNavForkIndexValue}",   ${level2List.index > level1.mainNavForkIndexValue}">

Now 3 sections (30,30,40 or 33,33,34%)

I need suggestion for sightly condition on how to achieve this.

Answer 1

You can use css for the container div. Try using flex and then style accordingly.

Here's an article on the same https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

You can use the bootstrap grid system to display the three columns. You can have a look at the below link: https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp