Spread listed elements evenly in two divs

Question

Good day all.

Not sure this has been asked before, but I am struggling to find the write answer as I have two problems which require the same type of solution. Just a brief history:

I have a list - which are links to some test solutions or to the tests themselves - but as one section requires them to be spread over two divs, another requires them to be spread over three. This is due to the number of tests a user has to take, so one user might take four tests, another two, but they are predetermined to which tests they are allowed to do by the client. So as we are not sure which tests they would take we would need to allow the elements to spread evenly so if a item is not listed then it does not destroy the row setup. Hope all this makes sense.

If we try to do this manually, three items could be listed in one column, with only one item listed in the other column. Or for the other section, three listed in one column, one item in the second and none in the third.

From previous queries I found the following:

.menu {text-align:justify;}
.menu > a {display:inline-block}
.menu:after { content:' '; display:inline-block; width: 100%; height: 0 }

<div class="menu">
  <a href="#">0</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>

Is there a way to limit the number of items in a row? This seems like a legitimate solution but I don't want everything spread evenly in one line. Though this but of code:

.test {
  display: flex;/* We first create a flex layout context */
  flex-flow: row wrap; /* Then we define the flow direction and if we allow the items to wrap */
  justify-content: space-around;/* Then we define how is distributed the remaining space */
  border: 1px solid #999999;
}
.test > div {
  margin: 10px;
  padding: 20px;
  background-color: #FF0000;
}

<div class="test">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
  <div>Div 5</div>
</div>

Does the same, which seems more favoured, but still - limit number of items in the row. Could anybody perhaps provide me with some feedback here.

Thanks

Answer 1

There is css selector named nth-child(), you can write something like this, nth-child(even) / nth-child(odd) / nth-child(3) etc, for example the following code will spit the div evenly.

menu > a {float:left}
menu > a:nth-child(even) + a { clear: both; }

<div class="menu">
  <a href="#">0</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
</div>