Is there a way to create a dynamic grid of squares in Bootstrap 4?
I understand the concept of creating a grid using
<div class="row">
<div class="col-md-3" style="width: 100px; height: 100px; color: red"></div>
<div class="col-md-3" style="width: 100px; height: 100px; color: red"></div>
<div class="col-md-3" style="width: 100px; height: 100px; color: red"></div>
<div class="col-md-3" style="width: 100px; height: 100px; color: red"></div>
</div>
However, I am looking to create a grid where the size adapts responsively to fit the page with a small margin between items.
I believe setting a minimum and maximum size for the items can help the grid determine the optimal number of items for each page.
I suspect this can be achieved using flexbox in Bootstrap 4, although I have yet to find any relevant examples in the documentation.