I have a main div containing multiple smaller square divs, set up like this:
<div class="container">
<div class="little-square"></div>
<div class="little-square"></div>
<div class="little-square"></div>
</div>
These little-square divs are dynamically generated using handlebars template. I want to limit each line in the container div to hold a maximum of four little-square divs. For example:
<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>
In this scenario, there should be four little-squares on the first line and two on the second. I am considering using JavaScript to add a line break after every fourth div, but not sure if that is the best approach. Any suggestions on how to achieve this effect? What factors should I consider when implementing this? (I'm new to CSS so any help is appreciated).