From e955f3e89eaa75a65f4911939ef41d21a3315b9e Mon Sep 17 00:00:00 2001
From: Lex Lim <hyperzlib@outlook.com>
Date: Mon, 25 Nov 2024 11:52:01 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 includes/MasonryWidget.php             |   5 +-
 modules/masonry/ext.isekai.masonry.css | 147 +++++++++++++------------
 modules/tile/style.less                |   1 +
 src/masonry/ext.isekai.masonry.less    |   7 +-
 4 files changed, 82 insertions(+), 78 deletions(-)

diff --git a/includes/MasonryWidget.php b/includes/MasonryWidget.php
index bb8c797..bd029d0 100644
--- a/includes/MasonryWidget.php
+++ b/includes/MasonryWidget.php
@@ -26,14 +26,15 @@ class MasonryWidget {
 
     public static function getStyle($params) {
         $gutter = max(0, $params['gutter']);
+        $halfGutter = round($gutter / 2, 6);
         $maxCol = max(1, $params['cols']);
         $colWidth = round(100 / $maxCol, 6);
-        $css = ".isekai-masonry.max-col-{$maxCol} { --masonry-col-width: {$colWidth}%; --masonry-gutter: {$gutter}px; }";
+        $css = ".isekai-masonry.max-col-{$maxCol} { --masonry-col-width: {$colWidth}%; --masonry-gutter: {$gutter}px; --masonry-gutter-half: {$halfGutter}px; }";
 
         if (isset($params['xs-cols'])) {
             $maxCol = max(1, $params['xs-cols']);
             $colWidth = round(100 / $maxCol, 6);
-            $css = ".isekai-masonry.max-col-xs-{$maxCol} { --masonry-col-width: {$colWidth}%; --masonry-gutter: {$gutter}px; }";
+            $css = ".isekai-masonry.max-col-xs-{$maxCol} { --masonry-col-width: {$colWidth}% }";
         }
 
         foreach (self::$breakpoints as $breakpoint => $width) {
diff --git a/modules/masonry/ext.isekai.masonry.css b/modules/masonry/ext.isekai.masonry.css
index 66c7b7e..381a825 100644
--- a/modules/masonry/ext.isekai.masonry.css
+++ b/modules/masonry/ext.isekai.masonry.css
@@ -2,6 +2,7 @@
   display: block;
   width: 100%;
   --masonry-col-width: 50%;
+  margin-left: calc(var(--masonry-gutter-half, 0) + 1px);
 }
 .isekai-masonry .isekai-masonry-gutter-sizer {
   width: 0;
@@ -9,307 +10,307 @@
 }
 .isekai-masonry .isekai-masonry-sizer {
   width: 100%;
-  width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
+  width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
 }
 .isekai-masonry .isekai-masonry-item {
   margin-bottom: var(--masonry-gutter);
 }
 .isekai-masonry .col-1 {
   width: 100%;
-  width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
+  width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
 }
 .isekai-masonry .col-2 {
   width: 100%;
-  width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px));
+  width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 0.001px));
 }
 .isekai-masonry .col-3 {
   width: 100%;
-  width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px));
+  width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 0.001px));
 }
 .isekai-masonry .col-4 {
   width: 100%;
-  width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px));
+  width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 0.001px));
 }
 .isekai-masonry .col-5 {
   width: 100%;
-  width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px));
+  width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 0.001px));
 }
 .isekai-masonry .col-6 {
   width: 100%;
-  width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px));
+  width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 0.001px));
 }
 .isekai-masonry .col-7 {
   width: 100%;
-  width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px));
+  width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 0.001px));
 }
 .isekai-masonry .col-8 {
   width: 100%;
-  width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px));
+  width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 0.001px));
 }
 .isekai-masonry .col-9 {
   width: 100%;
-  width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px));
+  width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 0.001px));
 }
 .isekai-masonry .col-10 {
   width: 100%;
-  width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px));
+  width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 0.001px));
 }
 .isekai-masonry .col-11 {
   width: 100%;
-  width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px));
+  width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 0.001px));
 }
 .isekai-masonry .col-12 {
   width: 100%;
-  width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px));
+  width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 0.001px));
 }
 @media (min-width: 576px) {
   .isekai-masonry .col-xs-1 {
     width: 100%;
-    width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
+    width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
   }
   .isekai-masonry .col-xs-2 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xs-3 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xs-4 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xs-5 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xs-6 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xs-7 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xs-8 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xs-9 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xs-10 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xs-11 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xs-12 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 0.001px));
   }
 }
 @media (min-width: 768px) {
   .isekai-masonry .col-sm-1 {
     width: 100%;
-    width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
+    width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
   }
   .isekai-masonry .col-sm-2 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-sm-3 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-sm-4 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-sm-5 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-sm-6 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-sm-7 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-sm-8 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-sm-9 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-sm-10 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-sm-11 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-sm-12 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 0.001px));
   }
 }
 @media (min-width: 992px) {
   .isekai-masonry .col-md-1 {
     width: 100%;
-    width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
+    width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
   }
   .isekai-masonry .col-md-2 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-md-3 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-md-4 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-md-5 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-md-6 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-md-7 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-md-8 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-md-9 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-md-10 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-md-11 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-md-12 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 0.001px));
   }
 }
 @media (min-width: 1200px) {
   .isekai-masonry .col-lg-1 {
     width: 100%;
-    width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
+    width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
   }
   .isekai-masonry .col-lg-2 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-lg-3 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-lg-4 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-lg-5 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-lg-6 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-lg-7 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-lg-8 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-lg-9 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-lg-10 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-lg-11 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-lg-12 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 0.001px));
   }
 }
 @media (min-width: 1400px) {
   .isekai-masonry .col-xl-1 {
     width: 100%;
-    width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px);
+    width: calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px);
   }
   .isekai-masonry .col-xl-2 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 2 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xl-3 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 3 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xl-4 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 4 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xl-5 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 5 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xl-6 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 6 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xl-7 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 7 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xl-8 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 8 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xl-9 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 9 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xl-10 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 10 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xl-11 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 11 - var(--masonry-gutter) - 0.001px));
   }
   .isekai-masonry .col-xl-12 {
     width: 100%;
-    width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 1px));
+    width: min(100%, calc(var(--masonry-col-width) * 12 - var(--masonry-gutter) - 0.001px));
   }
 }
 
diff --git a/modules/tile/style.less b/modules/tile/style.less
index 6001ccc..5222edb 100644
--- a/modules/tile/style.less
+++ b/modules/tile/style.less
@@ -18,6 +18,7 @@ a {
 
 .tiles-group {
     margin: 10px 0;
+    justify-content: center;
 }
 
 .tiles-group::before {
diff --git a/src/masonry/ext.isekai.masonry.less b/src/masonry/ext.isekai.masonry.less
index db6e9e8..f25ace8 100644
--- a/src/masonry/ext.isekai.masonry.less
+++ b/src/masonry/ext.isekai.masonry.less
@@ -11,13 +11,13 @@
   
     .col-@{prefix}1 {
         width: 100%; // Fallback
-        width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px)";
+        width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px)";
     }
 
     each(range(2, 12, 1), {
         .col-@{prefix}@{value} {
             width: 100%;
-            width: ~"min(100%, calc(var(--masonry-col-width) * @{value} - var(--masonry-gutter) - 1px))";
+            width: ~"min(100%, calc(var(--masonry-col-width) * @{value} - var(--masonry-gutter) - 0.001px))";
         }
     });
 }
@@ -26,6 +26,7 @@
     display: block;
     width: 100%;
     --masonry-col-width: 50%;
+    margin-left: ~"calc(var(--masonry-gutter-half, 0) + 1px)";
 
     .isekai-masonry-gutter-sizer {
         width: 0;
@@ -34,7 +35,7 @@
 
     .isekai-masonry-sizer {
         width: 100%;
-        width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px)";
+        width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 0.001px)";
     }
 
     .isekai-masonry-item {