feat: add simple grid

Author: RickEyre

packages/panda-san/src/layout/grid.scss

@@ -0,0 +1,30 @@
+.grid {
+  display: flex;
+  width: 100%;
+}
+
+.column {
+  padding: px-to-rem($grid-column-gap / 2);
+
+  @for $column-size from 1 through 12 {
+    &--is-#{$column-size} {
+      width: calc(100% / 12 * #{$column-size});
+    }
+
+    &--is-offset-#{$column-size} {
+      margin-left: calc(100% / 12 * #{$column-size});
+    }
+
+    @each $breakpoint-name, $breakpoint in $breakpoints {
+      @include breakpoint($breakpoint-name) {
+        &--is-#{$column-size}-#{$breakpoint-name} {
+          width: calc(100% / 12 * #{$column-size});
+        }
+
+        &--is-offset-#{$column-size}-#{$breakpoint-name} {
+          margin-left: calc(100% / 12 * #{$column-size});
+        }
+      }
+    }
+  }
+}

packages/panda-san/src/layout/index.scss

@@ -1,2 +1,3 @@
 @import 'container';
+@import 'grid';
 @import 'level';

packages/panda-san/src/variables/grid.scss

@@ -0,0 +1 @@
+$grid-column-gap: 24px;

packages/panda-san/src/variables/index.scss

@@ -3,4 +3,5 @@
 @import 'container';
 @import 'font';
 @import 'form';
+@import 'grid';
 @import 'stacks';