Force wrapping an inline-block with CSS, after 'n' elements?
<p>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 <code>white-space: wrap</code>, but that is meant to be applied to the parent element, so that isn't useable. I also tried <code>clear</code>, 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.</p>

<p>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.</p>

<p>Intended display, for the grid view (where n=3):</p>

<pre><code>Entry 1 | Entry 2 | Entry 3
--------+---------+--------
Entry 4 | Entry 5 | Entry 6
--------+---------+--------
Entry 7 | Entry 8 | Entry 9
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#results.grid {
  padding-top: 40px;
}
#results.grid .entry {
  display: inline-block;
}
#results.grid .entry:nth-child(3n+1) {
  background-color: yellow;
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="results" class="results grid"&gt;

  &lt;div class="entry"&gt;Entry 1&lt;/div&gt;
  &lt;div class="entry"&gt;Entry 2&lt;/div&gt;
  &lt;div class="entry"&gt;Entry 3&lt;/div&gt;

  &lt;div class="entry"&gt;Entry 4&lt;/div&gt;
  &lt;div class="entry"&gt;Entry 5&lt;/div&gt;
  &lt;div class="entry"&gt;Entry 6&lt;/div&gt;

  &lt;div class="entry"&gt;Entry 7&lt;/div&gt;
  &lt;div class="entry"&gt;Entry 8&lt;/div&gt;
  &lt;div class="entry"&gt;Entry 9&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>As a JSFiddle: <a href="https://jsfiddle.net/rn05gns1/" rel="nofollow">https://jsfiddle.net/rn05gns1/</a></p>