I am attempting to replicate the layout of CodePen's dashboard or, if you do not have an account, you can view CodePen's home screen.
My goal is to create a dynamic list of cards that are responsive and adjust the number of cards displayed in a row based on the viewport size.
I thought using Bootstrap would help achieve this functionality, but my attempts have been unsuccessful so far. It is important to note that the number of cards may vary dynamically.
Here is the progress I have made so far in this CodePen:
<div class="row">
<div class="col-md-2 " style="margin-bottom:10px;">
<div class="card card-default" >
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3>Card</h3>
<h6>Today</h6>
<p><strong>5 Errors</strong></p>
<p><strong>3 Warnings</strong></p>
<p><strong>1 Info</strong></p>
</div>
</div>
...
</div>
The current display looks like this: https://i.sstatic.net/v89Qr.png
However, when I decrease the window width, the layout becomes distorted. I want the cards to flow into the next row while utilizing the full available width space. https://i.sstatic.net/EAd8N.png
My objective is to achieve a layout similar to this: https://i.sstatic.net/JUmyg.png
Scaling down... https://i.sstatic.net/Rb1A8.png
Further scaling down... https://i.sstatic.net/RTeOv.png