Use masonry instead of hard rows

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";