diff --git a/src/layouts/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss index f00fe269..4d20581b 100644 --- a/src/layouts/FlowLayout/styles.module.scss +++ b/src/layouts/FlowLayout/styles.module.scss @@ -22,7 +22,7 @@ $cols: math.div($content_width, $cell); } .grid { - grid-template-rows: 50vh $cell; + grid-template-rows: 50vh; @include flow_grid; } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index c23fc8fc..fccf7be6 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -202,33 +202,44 @@ display: grid; grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr)); - grid-auto-rows: $cell; grid-auto-flow: row dense; grid-column-gap: $gap; grid-row-gap: $gap; + grid-auto-rows: $cell; + // 4 cells + @media (max-width: $cell * 5 + $gap * 4 + 55) { + grid-auto-rows: calc(25vw - 30px); + } + + // 3 cells + @media (max-width: $cell * 4 + $gap * 3 + 55) { + grid-auto-rows: calc(33vw - 30px); + } + + // 2 cells + @media (max-width: $cell * 3 + $gap * 2 + 55) { + grid-auto-rows: calc(50vw - 40px); + background: yellow; + } + + // < 870px @media (max-width: ($cell + 10) * 3) { grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr)); - grid-auto-rows: $fluid_cell; grid-template-rows: calc(50vw - 10px) $fluid_cell; } + // < 776px @media (max-width: $cell_tablet) { - grid-template-rows: calc(66vw - 10px) auto $fluid_cell; + grid-template-rows: calc(66vw - 10px) auto calc(50vw - 40px); } + // < 520px @media (max-width: $cell_mobile) { - // rework stamp, so it will be shown as smaller one on mobiles grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr)); - grid-template-rows: calc(80vw - 10px) auto 50vw; - grid-auto-rows: 50vw; - } - - @media (max-width: ($fluid_cell + 5) * 1.5 + 20) { - grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr)); - grid-template-rows: calc(80vw - 10px) auto 50vw; - grid-auto-rows: 50vw; + grid-template-rows: calc(100vw - 10px) auto calc(50vw - 10px); + background: green; } }