🐛 fix: 修正 grid 布局问题

arvinxx · Feb 2, 2022 · a80939d · a80939d
1 parent 8434793
commit a80939d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/packages/asset-gallery/package.json b/packages/asset-gallery/package.json
@@ -24,13 +24,10 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
-    "@bedrock-layout/columns": "^2.1.11",
-    "@bedrock-layout/inline": "^2.0.15",
-    "@bedrock-layout/masonry-grid": "^2.0.14",
-    "antd": "^4.14.0",
+    "antd": "^4.18.5",
     "copy-to-clipboard": "^3.3.1",
+    "classnames": "^2.3.1",
     "js-yaml": "^4.1.0",
-    "use-merge-value": "^1.0.2",
-    "styled-components": "^5.3.0"
+    "use-merge-value": "^1.0.2"
   }
 }
diff --git a/packages/asset-gallery/src/components/Layout.tsx b/packages/asset-gallery/src/components/Layout.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
-import { Columns } from '@bedrock-layout/columns';
+import cls from 'classnames';
+
 import Header from './Header';
 
 import type { AssetGalleryProps } from '../types';
@@ -36,18 +37,21 @@ const Layout: FC<LayoutProps> = ({
         onLayoutChange={onLayoutChange}
         showSlider={showSlider}
       />
-      {layout === 'grid' ? (
-        <Columns gutter={''} columns={columns}>
-          {children}
-        </Columns>
-      ) : (
+      {
         <div
-          className={'avx-asset-gallery-container avx-asset-gallery-masonry'}
-          style={{ columnCount: columns }}
+          className={cls(
+            'avx-asset-gallery-container',
+            `avx-asset-gallery-${layout}`,
+          )}
+          style={{
+            columnCount: layout === 'masonry' ? columns : undefined,
+            gridTemplateColumns:
+              layout === 'grid' ? `repeat(${columns}, 1fr)` : undefined,
+          }}
         >
           {children}
         </div>
-      )}
+      }
     </div>
   );
 };

diff --git a/packages/asset-gallery/src/style.less b/packages/asset-gallery/src/style.less
@@ -1,4 +1,8 @@
 .avx-asset-gallery {
+  &-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
   &-masonry {
     column-count: 4;
     column-gap: 0;