Preserve chronological order in gapless gallery rows

art.html

@@ -28,14 +28,17 @@ wide_gallery: true
     </details>
   </div>
 
-  <ul class="post-list">
+  <div class="post-list">
+    {% assign gallery_index = 0 %}
     {% for post in site.art reversed %}
       {% if post.published == false %}
         {% continue %}
       {% endif %}
       {% assign items = post.content | markdownify | lazy_images | gallery_items %}
       {% for item in items %}
-      <li class='lang-{% if post.lang %}{{ post.lang }}{% else %}en{% endif %}'>
+      {% assign row_position = gallery_index | modulo: 2 %}
+      {% if row_position == 0 %}<ul class="gallery-row">{% endif %}
+      <li class='lang-{% if post.lang %}{{ post.lang }}{% else %}en{% endif %}' style='--photo-ratio: {{ item | gallery_image_ratio }}'>
         <article class='post-content'>
           {% if post.anchor and forloop.first %}
           <span id='{{ post.title }}'></span>
@@ -43,9 +46,13 @@ wide_gallery: true
           {{ item }}
         </article>
       </li>
+      {% assign gallery_index = gallery_index | plus: 1 %}
+      {% assign row_position = gallery_index | modulo: 2 %}
+      {% if row_position == 0 %}</ul>{% endif %}
       {% endfor %}
     {% endfor %}
-  </ul>
+    {% if row_position == 1 %}</ul>{% endif %}
+  </div>
 
   <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via rss</a></p>