In an attempt to showcase cards within a responsive container utilizing bootstrap and django, my goal is to create a 3x3 grid layout on extra-large screens with scrollable overflow that adjusts based on device width. Initially, I experimented with wrapping the cards in a flex container with column layout, but found this solution to be temporary and not ideal. Another consideration was dynamically rearranging the cards through javascript upon window resizing, which although possible, may not be optimal. Alternatively, using technologies like CSS Grid could offer a better approach, although my current knowledge on its functionality is limited. Therefore, what would be the most effective strategy for achieving this desired layout... Here is a visual model I created to illustrate the issue at hand:
https://i.sstatic.net/E4d5v.jpg
PLEASE NOTE: The sample code provided below is meant for clarification purposes only and is not essential to the solution: I am showcasing one card here... imagine having 12.
HTML
<div class="container">
<div class="scrolling-wrapper d-flex flex-column flex-wrap align-items-center">
<div class="card">
<div class="card-body">
<div class="card-img">
<img src="{% static 'library/img/attention.jpg' %}" class="history-img" alt="">
</div>
<h6 class="card-subtitle">
Lorem ipsum dolor sit amet, co
</h6>
</div>
<div class="card-footer">
<span class=""><i class="fas fa-eye"></i>4093</span>
<span class=""><i class="fas fa-thumbs-up"></i>1234</span>
<span class="badge bg-primary rounded-pill px-2">#hello_there</span>
</div>
</div>
</div>
</div>
CSS
body * {
box-sizing: border-box !important;
}
.history-img{
width: 60px;
height: 60px;
object-fit: cover;
object-position: center;
}
.scrolling-wrapper{
max-height: 700px !important;
flex-wrap: wrap !important;
}
.card{
width: 20%;
height: 200px !important;
margin: 0;
}