created grid system

2026-09-12 03:26:10 +00:00 · 2021-05-01 15:07:44 +03:00
parent f4660562a4
commit 4d60e39e66
4 changed files with 65 additions and 0 deletions
@@ -0,0 +1,51 @@
+.row {
+  max-width: $grid-width;
+  background-color: #eee;
+  margin: 0 auto;
+
+  &:not(:last-child) {
+    margin-bottom: $gutter-vertical;
+  }
+
+  @include clearfix;
+
+  [class^="col-"] {
+    background-color: orangered;
+    float: left;
+    color: $color-white;
+
+    &:not(:last-child) {
+      margin-right: $gutter-horizontal;
+    }
+  }
+
+  .col-1-of-2 {
+    width: calc((100% - #{$gutter-horizontal}) / 2);
+  }
+
+  .col-1-of-3 {
+    width: calc((100% - (2 * #{$gutter-horizontal})) / 3);
+  }
+
+  .col-1-of-4 {
+    width: calc((100% - (3 * #{$gutter-horizontal})) / 4);
+  }
+
+  .col-2-of-3 {
+    width: calc(
+      2 * ((100% - (2 * #{$gutter-horizontal})) / 3) + #{$gutter-horizontal}
+    );
+  }
+
+  .col-2-of-4 {
+    width: calc(
+      2 * ((100% - (3 * #{$gutter-horizontal})) / 4) + #{$gutter-horizontal}
+    );
+  }
+
+  .col-3-of-4 {
+    width: calc(
+      3 * ((100% - (3 * #{$gutter-horizontal})) / 4) + 2 * #{$gutter-horizontal}
+    );
+  }
+}