made first good profile layout

src/layouts/FlowLayout/styles.module.scss

@@ -4,17 +4,6 @@
 
 $target_flow_cell_width: 225px;
 
-/** Makes a breakpoint for target cell width **/
-@mixin breakpoint($columns) {
-  @container sizer (max-width: #{$target_flow_cell_width* $columns}) {
-    grid-template-columns: repeat(#{$columns}, 1fr);
-    grid-auto-rows: calc(
-      (100cqw - #{$columns - 1} * #{$gap} / 2) / #{$columns}
-    );
-    @content;
-  }
-}
-
 .wrap {
   max-width: 2000px;
   padding: 0 40px 40px 40px;
@@ -26,8 +15,9 @@ $cols: math.div($content_width, $cell);
 
 .container {
   @include container;
+  @include flow_container;
+
   margin-top: $page_top_offset;
-  container: sizer / size;
 
   @include tablet {
     padding: 0 $gap;
@@ -38,20 +28,18 @@ $cols: math.div($content_width, $cell);
 .grid {
   width: 100%;
   min-height: 200px;
-  display: grid;
-  gap: #{$gap};
-  grid-template-columns: repeat(5, 1fr);
-  grid-auto-rows: calc((100cqw - 4 * #{$gap} / 2) / 5);
-  grid-template-rows: 40vh;
-  grid-auto-flow: row dense;
 
-  @include breakpoint(5);
+  @include flow_grid() {
-  @include breakpoint(4);
+    grid-template-rows: 40vh;
-  @include breakpoint(3) {
+  }
+
+  @include flow_breakpoint(5);
+  @include flow_breakpoint(4);
+  @include flow_breakpoint(3) {
     grid-template-rows: calc(66cqw - #{$gap}) auto;
   }
 
-  @include breakpoint(2) {
+  @include flow_breakpoint(2) {
     grid-template-rows: calc(100cqw - #{$gap}) auto;
   }
 

src/layouts/ProfileLayout/index.tsx

@@ -26,7 +26,64 @@ const ProfileLayout: FC<Props> = observer(({ username }) => {
   return (
     <Container className={styles.wrap}>
       <div className={styles.grid}>
-        <div className={styles.stamp}>
+        {
+          <Card className={styles.description}>
+            <p>
+              Inceptos cubilia velit faucibus mattis enim, massa conubia primis
+              torquent orci etiam? Pharetra arcu maecenas eget aptent auctor
+              massa habitant metus faucibus enim rhoncus. Laoreet fusce odio
+              litora primis senectus leo risus tristique semper augue tempor
+              arcu. Gravida sed cubilia malesuada hac proin parturient cubilia
+              habitant vulputate erat laoreet egestas. Condimentum.
+            </p>
+            <p>
+              Porta dui non eget varius pretium blandit fusce luctus sem
+              fermentum ac. At, porta iaculis primis! Mus aenean quam himenaeos
+              est vel interdum nostra sociosqu sodales sodales. Senectus
+              penatibus erat penatibus orci a suspendisse purus tristique
+              habitant rutrum ornare maecenas. Sapien vestibulum est ad
+              ridiculus viverra curae; suscipit penatibus lectus. A parturient
+              viverra morbi. Elit class primis laoreet, fusce integer pulvinar
+              facilisi. Dapibus scelerisque, leo mattis non primis dis. Sapien
+              lobortis mauris platea porttitor per class natoque maecenas fusce!
+              Est tellus sed leo!
+            </p>
+            <p>
+              Eros enim ac posuere vel mollis duis vivamus vivamus in est.
+              Elementum nostra himenaeos donec augue fermentum nascetur faucibus
+              dui lobortis. Hac per conubia a nunc primis. Tempus tempus erat
+              quam platea viverra nibh laoreet at aenean. Convallis habitasse,
+              luctus libero dis natoque suspendisse commodo hac? Natoque velit
+              pulvinar fusce posuere aliquam amet non. Dui phasellus netus
+              luctus. Potenti nostra tristique maecenas quisque egestas sociis!
+              A a sociosqu molestie sed blandit sapien sed pellentesque. Nisi
+              purus auctor aliquam tortor auctor faucibus. Quisque, ullamcorper
+              nisi tellus dignissim tempus.
+            </p>
+            <p>
+              Orci dis tincidunt porttitor amet ad hendrerit proin sollicitudin
+              mi. Amet sodales mi vivamus lacus sociosqu eleifend eros blandit
+              quisque mus dignissim imperdiet? Viverra suscipit metus eleifend
+              cras nibh nisl, fusce cum nascetur nibh. Sagittis cubilia
+              vulputate mauris lobortis! Rhoncus, ultrices magna ut condimentum.
+              Accumsan consequat penatibus vehicula varius nulla magna arcu leo
+              primis. Lacus pretium facilisis luctus quis sodales torquent
+              tempor? Nam scelerisque hendrerit diam ante cubilia volutpat. Nisi
+              curae; accumsan phasellus cursus orci tempus dolor ridiculus?
+              Taciti dis scelerisque sit.
+            </p>
+            <p>
+              Ligula odio aliquam donec platea? Ut; urna per praesent erat
+              conubia fermentum. Dis dapibus vulputate quisque odio cum et
+              vivamus ut. Risus accumsan cubilia ante nisi cum. Vulputate tempor
+              platea eget eleifend auctor rhoncus, vivamus vel ut? Nunc turpis
+              inceptos molestie molestie. Class libero eros volutpat placerat
+              quisque. Inceptos litora, felis.
+            </p>
+          </Card>
+        }
+
+        <Card className={styles.left} seamless>
           <Sticky>
             <ProfilePageLeft
               description={profile.description}
@@ -35,13 +92,10 @@ const ProfileLayout: FC<Props> = observer(({ username }) => {
               isLoading={isLoading}
             />
           </Sticky>
-        </div>
+        </Card>
 
-        <Card className={styles.description}>{profile.description}</Card>
+        <FlowGrid nodes={nodes} user={user} onChangeCellView={() => {}} />
-
+        <FlowGrid nodes={nodes} user={user} onChangeCellView={() => {}} />
-        <div className={styles.nodes}>
-          <FlowGrid nodes={nodes} user={user} onChangeCellView={() => {}} />
-        </div>
       </div>
     </Container>
   );

src/layouts/ProfileLayout/styles.module.scss

@@ -1,17 +1,29 @@
 @import 'src/styles/variables';
 
 .wrap {
-  display: grid;
+  @include flow_container();
-  grid-template-columns: auto;
-  grid-column-gap: $gap;
   margin-top: $page_top_offset;
 }
 
+.description {
+  grid-column: 2 / -3;
+  grid-row: 1 / 4;
+  height: 100%;
+  font: $font_14_medium;
+  overflow: auto;
+  height: 100%;
+}
+
 .grid {
-  grid-template-columns: 250px 5fr;
+  @include flow_grid();
-  display: grid;
+
-  column-gap: $gap;
+  @include flow_breakpoint(4);
-  row-gap: $gap;
+  @include flow_breakpoint(3);
+  @include flow_breakpoint(2) {
+    .left {
+      grid-column: 1 / -1;
+    }
+  }
 }
 
 .row {
@@ -19,20 +31,7 @@
   height: 100%;
 }
 
-.description {
+.left {
-  font: $font_14_semibold;
+  grid-row-start: 1;
-}
+  grid-row-end: span 3;
-
-.stamp {
-  grid-row-end: span 2;
-}
-
-.nodes {
-  @include flow_grid();
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: $gap;
 }

src/styles/_mixins.scss

@@ -1,19 +1,25 @@
 @use 'sass:math';
 
 @mixin outer_shadow() {
-  box-shadow: inset $gray_90 1px 1px, transparentize(black, 0.8) 1px 1px,
+  box-shadow:
+    inset $gray_90 1px 1px,
+    transparentize(black, 0.8) 1px 1px,
     transparentize(black, 0.6) 0 1px 5px;
 }
 
 // same as outer shadow, but higher
 @mixin dropdown_shadow {
-  box-shadow: inset $gray_90 1px 1px, transparentize(black, 0.8) 1px 1px,
+  box-shadow:
+    inset $gray_90 1px 1px,
+    transparentize(black, 0.8) 1px 1px,
     transparentize(black, 0.6) 5px 5px 10px;
 }
 
 @mixin row_shadow() {
   &:not(:last-child) {
-    box-shadow: $gray_90 0 1px, inset transparentize(black, 0.8) 0 -1px;
+    box-shadow:
+      $gray_90 0 1px,
+      inset transparentize(black, 0.8) 0 -1px;
   }
 
   &:only-child {
@@ -22,7 +28,9 @@
 }
 
 @mixin inner_shadow() {
-  box-shadow: inset $gray_90 -1px -1px, inset transparentize(black, 0.9) 1px 1px,
+  box-shadow:
+    inset $gray_90 -1px -1px,
+    inset transparentize(black, 0.9) 1px 1px,
     inset transparentize(black, 0.9) 0 0 10px;
 }
 
@@ -36,7 +44,9 @@
 }
 
 @mixin input_shadow() {
-  box-shadow: inset $gray_90 0 -1px, inset transparentize(black, 0.8) 0 1px;
+  box-shadow:
+    inset $gray_90 0 -1px,
+    inset transparentize(black, 0.8) 0 1px;
 }
 
 @mixin modal_mixin() {
@@ -190,49 +200,49 @@
   cursor: pointer;
 }
 
+/** Creates container for container-query flow. 
+
+Should wrap div with @flow_grid and @flow_breakpoint mixins
+**/
+@mixin flow_container {
+  container: sizer / size;
+}
+
+/** Setups flow grid. 
+
+Should be wrapped with div that uses @include flow_container() for correct work
+
+Pass your custom rows here, like:
+
+@include flow_grid {
+   grid-template-rows: 220px; // will add 220px first row
+}
+**/
 @mixin flow_grid {
-  width: 100%;
-  box-sizing: border-box;
   display: grid;
-
+  gap: #{$gap};
-  grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr));
+  grid-template-columns: repeat(5, 1fr);
-
+  grid-auto-rows: calc((100cqw - 4 * #{$gap} / 2) / 5);
   grid-auto-flow: row dense;
-  grid-column-gap: $gap;
-  grid-row-gap: $gap;
-  grid-auto-rows: $cell;
 
-  // 4 cells
+  @content;
-  @media (max-width: ($cell * 5 + $gap * 4 + 55)) {
+}
-    grid-auto-rows: calc(25vw - 30px);
-  }
 
-  // 3 cells
+/** Makes a breakpoint for target cell width,
-  @media (max-width: ($cell * 4 + $gap * 3 + 55)) {
-    grid-auto-rows: calc(33vw - 30px);
-  }
 
-  // 2 cells
+Pass your rules for that breakpoint in @content: 
-  @media (max-width: ($cell * 3 + $gap * 2 + 55)) {
-    grid-auto-rows: calc(50vw - 40px);
-  }
 
-  // < 870px
+@include flow_breakpoint(2) { // defines breakpoint for 2 cells
-  @media (max-width: (($cell + 10) * 3)) {
+  background: red; // will paint element red at 2 cells resolution;
-    grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr));
+}
-    grid-template-rows: calc(50vw - 10px) $fluid_cell;
+**/
-  }
+@mixin flow_breakpoint($columns) {
-
+  @container sizer (max-width: #{$target_flow_cell_width* $columns}) {
-  // < 776px
+    grid-template-columns: repeat(#{$columns}, 1fr);
-  @media (max-width: $cell_tablet) {
+    grid-auto-rows: calc(
-    grid-template-rows: calc(66vw - 10px) auto calc(50vw - 40px);
+      (100cqw - #{$columns - 1} * #{$gap} / 2) / #{$columns}
-  }
+    );
-
+    @content;
-  // < 520px
-  @media (max-width: $cell_mobile) {
-    grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
-    grid-template-rows: calc(100vw - 10px) auto;
-    grid-auto-rows: calc(50vw - 10px);
   }
 }