HTML Question

Forcing inline div to go to the next line after certain amount of divs have been rendered

I have a container div with X amount of smaller container squares. So something like this:

<div class="container">

<div class="little-square"></div>
<div class="little-square"></div>
<div class="little-square"></div>

</div>


The little-square divs will be rendered iteratively by use of a handlebars template. What I want it to do is to have a maximum of four little-square divs per line. So if we approach this situation:

<div class="container">

<div class="little-square"></div>
<div class="little-square"></div>
<div class="little-square"></div>
<div class="little-square"></div>
<div class="little-square"></div>
<div class="little-square"></div>

</div>


Then the expected result should be four little-squares in the first line of the container div, and then two little-squares in the second line. I was thinking about having some sort of js code implementing 'if created div is fourth in line, then inject a br in this div to force the newline', but not too sure if that's even well looked upon.

Any suggestions on how to do this? What should I take into consideration when planning this effect? (css noob here. thanks for the help).

Answer

There is no easy solution for this but you could hack it with display: inline on elements and content: "\00000a", white-space: pre.

.little-square {
  background: black;
  margin: 10px;
  display: inline;
  padding: 15px 25px;
  line-height: 65px;
}
.little-square:nth-child(4n):after {
  content: "\00000a";
  white-space: pre;
}
<div class="container">
  <div class="little-square"></div>
  <div class="little-square"></div>
  <div class="little-square"></div>
  <div class="little-square"></div>
  <div class="little-square"></div>
  <div class="little-square"></div>
</div>