I have a collection of items that I would like to showcase next to each other in rows.
The static HTML code I have currently works perfectly.
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
However, when attempting to achieve the same layout using an AngularJS loop, I encountered some issues.
<div ng-repeat="product in Products">
<div class="box">
// additional content will be inserted here.
</div>
</div>
The result I obtained was not as expected.
This is my current CSS class styling:
.box {
padding : 5px;
display : inline-block;
min-width: 100px;
min-height: 50px;
background-color: red;
}
What modifications should I make to ensure the items are displayed side by side and move onto the next row if the screen width is full?