Switch gem grid to CSS auto-fill grid, remove row wrappers

Author: pusewicz

assets/css/redesign.css

@@ -1356,15 +1356,8 @@ ul {
 }
 
 .libs-grid__rows {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  background: var(--color-border);
-}
-
-.libs-row {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 1px;
   background: var(--color-border);
 }
@@ -1522,16 +1515,4 @@ ul {
     gap: 12px;
   }
 
-  .libs-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-/* ------------------------------------------------------------
-   Libraries — Responsive ≤480px
-   ------------------------------------------------------------ */
-@media (max-width: 480px) {
-  .libs-row {
-    grid-template-columns: 1fr;
-  }
 }

libraries/index.html

@@ -49,12 +49,7 @@ <h1 class="page-header__heading">mrbgems</h1>
 <section class="libs-grid">
   <div class="libs-grid__inner">
     <div class="libs-grid__rows" id="libs-grid">
-      {% assign gems = site.data.mgems %}
-      {% assign row_size = 3 %}
-      {% assign row_index = 0 %}
-      {% for mgem in gems %}
-        {% assign mod = row_index | modulo: row_size %}
-        {% if mod == 0 %}<div class="libs-row">{% endif %}
+      {% for mgem in site.data.mgems %}
         {% if mgem.author.first %}{% assign mgem_author = mgem.author | join: ", " %}{% else %}{% assign mgem_author = mgem.author %}{% endif %}
         <a
           href="{{ mgem.website }}"
@@ -69,9 +64,6 @@ <h1 class="page-header__heading">mrbgems</h1>
           </div>
           <p class="libs-card__description">{{ mgem.description | xml_escape }}</p>
         </a>
-        {% assign row_index = row_index | plus: 1 %}
-        {% assign mod_end = row_index | modulo: row_size %}
-        {% if mod_end == 0 or forloop.last %}</div>{% endif %}
       {% endfor %}
     </div>
     <div class="libs-no-results" id="libs-no-results" aria-live="polite">
@@ -116,17 +108,6 @@ <h1 class="page-header__heading">mrbgems</h1>
       }
     });
 
-    document.querySelectorAll('.libs-row').forEach(function (row) {
-      var hasVisible = Array.from(row.querySelectorAll('.libs-card')).some(function (c) {
-        return !c.hasAttribute('hidden');
-      });
-      if (hasVisible) {
-        row.removeAttribute('hidden');
-      } else {
-        row.setAttribute('hidden', '');
-      }
-    });
-
     if (q) {
       countLabel.textContent = 'Showing ' + visible + ' of ' + total + ' libraries';
       footerCount.textContent = 'Showing ' + visible + ' of ' + total + ' libraries \u2014';