From 71f7a137297458b41074abc8f97032bb112f02ed Mon Sep 17 00:00:00 2001
From: Marek <gitlab@marha.de>
Date: Sun, 19 Apr 2026 19:18:32 +0200
Subject: [PATCH] update

---
 main.js    |  9 +++++----
 styles.css | 39 +++++++++++++++++++++++++++++++++++----
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/main.js b/main.js
index e131cd1..44b4a4d 100644
--- a/main.js
+++ b/main.js
@@ -2016,6 +2016,7 @@ var GridView = class extends import_obsidian7.ItemView {
       this.plugin.settings.titleFontSize + "em"
     );
     this.gridItems = [];
+    const gridInner = container.createDiv("ge-grid-inner");
     if (
       this.sourceMode === "bookmarks" &&
       !((_a = this.app.internalPlugins.plugins.bookmarks) == null
@@ -2038,7 +2039,7 @@ var GridView = class extends import_obsidian7.ItemView {
       this.plugin.settings.showParentFolderItem &&
       this.sourcePath !== "/"
     ) {
-      const parentFolderEl = container.createDiv("ge-grid-item ge-folder-item");
+      const parentFolderEl = gridInner.createDiv("ge-grid-item ge-folder-item");
       this.gridItems.push(parentFolderEl);
       const parentPath =
         this.sourcePath.split("/").slice(0, -1).join("/") || "/";
@@ -2208,7 +2209,7 @@ var GridView = class extends import_obsidian7.ItemView {
           })
           .sort((a, b) => a.name.localeCompare(b.name));
         for (const folder of subfolders) {
-          const folderEl = container.createDiv("ge-grid-item ge-folder-item");
+          const folderEl = gridInner.createDiv("ge-grid-item ge-folder-item");
           this.gridItems.push(folderEl);
           folderEl.dataset.folderPath = folder.path;
           if (import_obsidian7.Platform.isDesktop) {
@@ -2376,7 +2377,7 @@ var GridView = class extends import_obsidian7.ItemView {
     }
     let files = [];
     if (this.searchQuery && this.sourceMode !== "random-note") {
-      const loadingDiv = container.createDiv("ge-loading-indicator");
+      const loadingDiv = gridInner.createDiv("ge-loading-indicator");
       loadingDiv.setText(t("searching"));
       let allFiles = [];
       if (this.searchAllFiles) {
@@ -2519,7 +2520,7 @@ var GridView = class extends import_obsidian7.ItemView {
     let filesCardEl = null;
     let filesListEl = null;
     if (files.length > 0) {
-      filesCardEl = container.createDiv("ge-grid-item ge-files-card");
+      filesCardEl = gridInner.createDiv("ge-grid-item ge-files-card");
       filesListEl = filesCardEl.createDiv("ge-folder-files");
     }
     for (const file of files) {
diff --git a/styles.css b/styles.css
index 8d9af97..3879554 100644
--- a/styles.css
+++ b/styles.css
@@ -19,10 +19,7 @@
 /* Grid 樣式 */
 .ge-grid-container {
     display: block;
-    column-count: 1;
-    column-width: 320px;
-    column-gap: 12px;
-    padding: 12px !important;
+    padding: 0 !important;
     background: var(--background-secondary) !important;
     flex: 1 1 0;
     width: 100%;
@@ -31,6 +28,40 @@
     box-sizing: border-box;
     overflow-x: hidden;
     overflow-y: auto;
+    container-type: inline-size;
+}
+
+.ge-grid-inner {
+    display: block;
+    column-width: 320px;
+    column-gap: 12px;
+    padding: 12px;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+@container (max-width: 340px) {
+    .ge-grid-inner {
+        column-count: 1;
+    }
+}
+
+@container (min-width: 340px) and (max-width: 660px) {
+    .ge-grid-inner {
+        column-count: 2;
+    }
+}
+
+@container (min-width: 660px) and (max-width: 990px) {
+    .ge-grid-inner {
+        column-count: 3;
+    }
+}
+
+@container (min-width: 990px) and (max-width: 1320px) {
+    .ge-grid-inner {
+        column-count: 4;
+    }
 }
 
 .is-mobile .ge-grid-container::-webkit-scrollbar {