returned fluid lab

src/containers/lab/LabGrid/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+import Masonry from 'react-masonry-css';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import styles from './styles.module.scss';
 import { LabNode } from '~/components/lab/LabNode';
@@ -8,6 +9,11 @@ import { values } from 'ramda';
 
 interface IProps {}
 
+const breakpointCols = {
+  default: 2,
+  1280: 1,
+};
+
 const getRandomNodeType = () =>
   values(NODE_TYPES)[Math.floor(Math.random() * values(NODE_TYPES).length)];
 
@@ -26,17 +32,30 @@ const LabGrid: FC<IProps> = () => {
 
   if (is_loading) {
     return (
-      <div className={styles.wrap}>
+      <Masonry
+        className={styles.wrap}
+        breakpointCols={breakpointCols}
+        columnClassName={styles.column}
+      >
         <LoadingNode />
         <LoadingNode />
         <LoadingNode />
         <LoadingNode />
-      </div>
+        <LoadingNode />
+        <LoadingNode />
+        <LoadingNode />
+        <LoadingNode />
+        <LoadingNode />
+      </Masonry>
     );
   }
 
   return (
-    <div className={styles.wrap}>
+    <Masonry
+      className={styles.wrap}
+      breakpointCols={breakpointCols}
+      columnClassName={styles.column}
+    >
       {nodes.map(node => (
         <LabNode
           node={node.node}
@@ -45,7 +64,7 @@ const LabGrid: FC<IProps> = () => {
           commentCount={node.comment_count}
         />
       ))}
-    </div>
+    </Masonry>
   );
 };
 

src/containers/lab/LabGrid/styles.module.scss

@@ -1,8 +1,17 @@
 @import "~/styles/variables.scss";
 
-.wrap {
+div.wrap {
-  display: grid;
+  display: flex;
-  grid-auto-flow: row;
+  width: 100%;
-  grid-auto-rows: auto;
+  margin-right: 0;
-  grid-row-gap: $gap * 2;
+}
+
+.column {
+  background-clip: padding-box;
+  box-sizing: border-box;
+  padding: 0 $gap / 2;
+
+  & > div {
+    margin-bottom: $gap;
+  }
 }

src/layouts/LabLayout/index.tsx

@@ -18,20 +18,9 @@ import classNames from 'classnames';
 
 interface IProps {}
 
-enum Layout {
-  Fluid = 'fluid',
-  Default = 'default',
-}
-
 const LabLayout: FC<IProps> = () => {
   const { is_loading } = useShallowSelect(selectLabList);
   const dispatch = useDispatch();
-  const [layout, setLayout] = usePersistedState('lab_layout', Layout.Default);
-
-  const isFluid = layout === Layout.Fluid;
-  const toggleLayout = useCallback(() => {
-    setLayout(isFluid ? Layout.Default : Layout.Fluid);
-  }, [setLayout, isFluid]);
 
   useEffect(() => {
     dispatch(labGetList());
@@ -39,8 +28,8 @@ const LabLayout: FC<IProps> = () => {
   }, [dispatch]);
 
   return (
-    <div>
+    <Container>
-      <div className={classNames(styles.container, { [styles.fluid]: isFluid })}>
+      <div className={styles.container}>
         <div className={styles.wrap}>
           <Group className={styles.content}>
             <LabHead isLoading={is_loading} />
@@ -56,7 +45,7 @@ const LabLayout: FC<IProps> = () => {
       </div>
 
       <SidebarRouter prefix="/lab" isLab />
-    </div>
+    </Container>
   );
 };
 

src/layouts/LabLayout/styles.module.scss

@@ -1,28 +1,15 @@
 @import "~/styles/variables.scss";
 
-@mixin fluid {
-  @media(min-width: $content_width) {
-    .fluid & {
-      @content
-    }
-  }
-}
-
 .wrap {
   display: grid;
   grid-template-columns: 3fr 1fr;
-  column-gap: $gap;
+  column-gap: $gap/2;
 
   @include tablet {
     grid-template-columns: 1fr;
     grid-auto-flow: row;
     padding: 0 $gap / 2;
   }
-
-  @include fluid {
-    grid-template-columns: 3fr $cell;
-    padding: 0 $gap;
-  }
 }
 
 .panel {