How can I create a responsive grid of squares in Bootstrap 4?
I know I can create a grid with
<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>
but instead of setting the width and height to 100px, I want the size to be responsive so I can fill out the entire page with grids and keep a small margin between the items.
So I guess I need to define a minimum and maximum size for the items, so I can make the grid define the optimal number of items on each page.
I guess it can be done with flexbox in Bootstrap 4, but I don't find any examples in the documentation.
