Force wrapping an inline-block with CSS, after 'n' elements?

Question

I am trying to display a list of divs as a grid, using purely CSS, but I can't get it to behave properly. I had looked at white-space: wrap, but that is meant to be applied to the parent element, so that isn't useable. I also tried clear, but no luck either. Can anyone suggest an approach, that would work for any value of elements per row. The code below is intended to be three elements per line.

The reason I want this in CSS, is that code that this is part of is intended to allow the user to display the entries horizontally, vertically or as a grid (of n elements wide). The value of 'n', for the elements per row of the grid is based on a configurable value.

Intended display, for the grid view (where n=3):

Entry 1 | Entry 2 | Entry 3
--------+---------+--------
Entry 4 | Entry 5 | Entry 6
--------+---------+--------
Entry 7 | Entry 8 | Entry 9

#results.grid {
  padding-top: 40px;
}
#results.grid .entry {
  display: inline-block;
}
#results.grid .entry:nth-child(3n+1) {
  background-color: yellow;
  display: block;
}

<div id="results" class="results grid">

  <div class="entry">Entry 1</div>
  <div class="entry">Entry 2</div>
  <div class="entry">Entry 3</div>

  <div class="entry">Entry 4</div>
  <div class="entry">Entry 5</div>
  <div class="entry">Entry 6</div>

  <div class="entry">Entry 7</div>
  <div class="entry">Entry 8</div>
  <div class="entry">Entry 9</div>
</div>

As a JSFiddle: https://jsfiddle.net/rn05gns1/

Answer 1

Instead of inline block use floats:

#results.grid .entry {
   float: left;
}

#results.grid .entry:nth-child(3n+1){
   background-color: yellow;
   clear: left;
}

$(document).ready(function() {
  $('#mode').change(function() {
    $('#results').removeClass();
    $('#results').addClass($(this).val());
  })
})

#controls {
  position: fixed;
  z-index: 4;
  background-color: white;
  width: 100%;
  padding: 4px
}
.entry {
  width: 200px;
  height: 150px;
  border: solid 1px black;
  margin: 5px;
}
#results.horizontal {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  white-space: nowrap;
  padding-top: 40px;
}
#results.horizontal .entry {
  display: inline-block;
}
#results.vertical {
  position: absolute;
  top: 40px;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
}
#results.grid .entry.vertical {
  display: block;
}
#results.grid {
  padding-top: 40px;
}
#results.grid .entry {
  float: left;
}
#results.grid .entry:nth-child(3n+1) {
  clear: left;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results" class="results grid">

  <div class="entry">Entry 1</div>
  <div class="entry">Entry 2</div>
  <div class="entry">Entry 3</div>

  <div class="entry">Entry 4</div>
  <div class="entry">Entry 5</div>
  <div class="entry">Entry 6</div>

  <div class="entry">Entry 7</div>
  <div class="entry">Entry 8</div>
  <div class="entry">Entry 9</div>
</div>