Use masonry instead of hard rows

themes/maik-blog/assets/js/list_columns.js

@@ -0,0 +1,23 @@
+function resizeItem(masonry, item){
+  let rowHeight = parseInt(window.getComputedStyle(masonry).getPropertyValue('grid-auto-rows'));
+  let rowGap = parseInt(window.getComputedStyle(masonry).getPropertyValue('grid-row-gap'));
+  let rowSpan = Math.ceil((item.querySelector('.masonry-item-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
+  item.style.gridRowEnd = "span "+rowSpan;
+}
+
+function resizeAll(){
+  let masonry = document.getElementsByClassName("masonry")[0];
+  masonry.style.gridAutoRows = "20px"
+  masonry.style.marginBottom = "80px"
+  let allItems = document.getElementsByClassName("masonry-item");
+
+  for (const item of allItems) {
+    resizeItem(masonry, item)
+  }
+}
+
+window.addEventListener("load", () => {
+  resizeAll()
+
+  window.addEventListener("resize", resizeAll);
+})

themes/maik-blog/assets/scss/_masonry.scss

@@ -0,0 +1,11 @@
+.masonry {
+  display: grid;
+  grid-gap: 20px 90px;
+  grid-template-columns: repeat(2, minmax(250px, 1fr));
+  // grid-auto-rows: 20px; // Set by JavaScript
+  // margin-bottom: calc(4 * 20px); // Set by JavaScript
+
+  @media #{$media-size-medium} {
+    grid-template-columns: 1fr;
+  }
+}

themes/maik-blog/assets/scss/_posts.scss

@@ -36,39 +36,21 @@
     margin: 0;
     padding: 0;
     list-style: none;
-
-    &-columns {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-
-      @media #{$media-size-medium} {
-        justify-content: center;
-      }
-
-      .post {
-        width: 430px;
-        min-width: 45%;
-        margin: 0px;
-
-        @media #{$media-size-medium} {
-          width: 90%;
-        }
-
-        &-cover {
-          width: 115%;
-          margin: 40px -30px;
-
-          img {
-            max-height: 20rem;
-            margin: 0 auto;
-          }
-        }
-      }
-    }
   }
 
   .post {
+    &.masonry-item {
+      .post-cover {
+        width: 115%;
+        margin: 40px -30px;
+
+        img {
+          max-height: 20rem;
+          margin: 0 auto;
+        }
+      }
+    }
+
     &-title {
       font-size: 1.9rem;
       margin: 5px 0 5px 0;

themes/maik-blog/assets/scss/main.scss

@@ -17,3 +17,4 @@
 @import "footer";
 @import "sharing-buttons";
 @import "code";
+@import "masonry";