refactor: file list grid layout

src/routes/resources/index.js

@@ -62,8 +62,16 @@ function ResourceManagement({ fileMessages }) {
   };
   useEffect(() => {
     if (view == Views.grid && listContainerRef) {
+      const container = listContainerRef.current;
+      const cWidth = container.getBoundingClientRect().width - 16 * 2;
+      const count = Math.floor(cWidth / 368);
+      const leftWidth = cWidth % 368;
+      const gutter = Math.max(Math.floor(leftWidth / (count - 1)), 8);
+      console.log("gutter", gutter, cWidth, count, leftWidth);
       msnry = new Masonry(listContainerRef.current, {
         // options
+        fitWidth: true,
+        gutter,
         itemSelector: ".file_box",
         // columnWidth: 200
       });

src/routes/resources/styled.js

@@ -19,19 +19,17 @@ const Styled = styled.div`
     height: 100%;
     overflow-y: scroll;
     width: 100%;
-
     display: flex;
     &.item {
       gap: 8px;
       flex-direction: column;
-      /* align-items: flex-start; */
     }
     &.grid {
       flex-direction: row;
       flex-wrap: wrap;
       > .file_box {
         flex-direction: column;
-        margin-right: 8px;
+        /* margin-right: 8px; */
         margin-bottom: 8px;
       }
     }