basic setup

styles/_layout.scss

@@ -0,0 +1,91 @@
+@use 'sass:list';
+@use 'functions' as *;
+
+// css variables exposed globally:
+// --layout-column-count: columns count in the layout
+// --layout-column-gap: gap size between columns
+// --layout-margin: layout margin size (left or right)
+// --layout-width: 100vw minus 2 * --layout-margin
+// --layout-column-width: size of a single column
+
+// css classes exposed globally:
+// .layout-block: element takes the whole layout width
+// .layout-block-inner: same as .layout-block but using padding instead of margin
+// .layout-grid: extends .layout-block with grid behaviour using layout settings
+// .layout-grid-inner: same as .layout-grid but using padding instead of margin
+
+@use 'sass:map';
+
+// config to fill
+// 'variable': (mobile, desktop)
+$layout: (
+    'columns-count': (
+        5,
+        18,
+    ),
+    'columns-gap': (
+        20px,
+        20px,
+    ),
+    'margin': (
+        30px,
+        60px,
+    ),
+);
+
+//internal process, do not touch
+:root {
+    --layout-column-count: #{list.nth(map.get($layout, 'columns-count'), 1)};
+    --layout-column-gap: #{mobile-vw(
+            list.nth(map.get($layout, 'columns-gap'), 1)
+        )};
+    --layout-margin: #{mobile-vw(list.nth(map.get($layout, 'margin'), 1))};
+    --layout-width: calc(100vw - (2 * var(--layout-margin)));
+    --layout-column-width: calc(
+        (
+                var(--layout-width) -
+                    (
+                        (var(--layout-column-count) - 1) *
+                            var(--layout-column-gap)
+                    )
+            ) /
+            var(--layout-column-count)
+    );
+
+    @include desktop {
+        --layout-column-count: #{list.nth(map.get($layout, 'columns-count'), 2)};
+        --layout-column-gap: #{desktop-vw(
+                list.nth(map.get($layout, 'columns-gap'), 2)
+            )};
+        --layout-margin: #{desktop-vw(list.nth(map.get($layout, 'margin'), 2))};
+    }
+}
+
+.layout-block {
+    max-width: var(--layout-width);
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+}
+
+.layout-block-inner {
+    padding-left: var(--layout-margin);
+    padding-right: var(--layout-margin);
+    width: 100%;
+}
+
+.layout-grid {
+    @extend .layout-block;
+
+    display: grid;
+    grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
+    grid-gap: var(--layout-column-gap);
+}
+
+.layout-grid-inner {
+    @extend .layout-block-inner;
+
+    display: grid;
+    grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
+    grid-gap: var(--layout-column-gap);
+}