Bootstrap 5 is missing card-columns, use masonry instead

templates/find_more.html

@@ -58,9 +58,10 @@
 
 {{ render_pagination(pager) }}
 
-<div class="card-columns">
+<div class="row" data-masonry='{"percentPosition": true }'>
   {% for item in items %}
   {% set image = item.image %}
+  <div class="col-sm-6 col-lg-4 mb-4">
   <div class="card">
     <a href="{{ url_for('item_page', item_id=item.item_id) }}">
       {# <img src="{{ image.thumburl }}" height="{{ image.thumbheight }}" width="{{ image.thumbwidth }}" class="card-img-top"></a> #}
@@ -86,6 +87,7 @@
       </p>
     </div>
   </div>
+  </div>
   {% endfor %}
 </div>
 
@@ -95,6 +97,8 @@
 {% endblock %}
 
 {% block script %}
+<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
+
 <script>
   $('#filters').hide();