Merge pull request #266 from tabler/grid-offsets

feat(GridCol): add offset props

Author: jonthomp

src/components/Grid/GridCol.examples.md

@@ -49,3 +49,16 @@
   </Grid.Col>
 </Grid.Row>
 ```
+
+### Column Offset
+
+```jsx
+<Grid.Row>
+  <Grid.Col width={6} offset={3}>
+    2
+  </Grid.Col>
+  <Grid.Col md={6} offsetMd={3}>
+    4
+  </Grid.Col>
+</Grid.Row>
+```

src/components/Grid/GridCol.react.js

@@ -18,6 +18,12 @@ type Props = {|
   +xl?: number,
   +xlAuto?: boolean,
   +auto?: boolean,
+  +offset?: number,
+  +offsetXs?: number,
+  +offsetSm?: number,
+  +offsetMd?: number,
+  +offsetLg?: number,
+  +offsetXl?: number,
 |};
 
 function GridCol({
@@ -35,6 +41,12 @@ function GridCol({
   lgAuto,
   xlAuto,
   auto,
+  offset = 0,
+  offsetXs = 0,
+  offsetSm = 0,
+  offsetMd = 0,
+  offsetLg = 0,
+  offsetXl = 0,
 }: Props): React.Node {
   const classes = cn(
     {
@@ -51,6 +63,12 @@ function GridCol({
       [`col-xl-${xl}`]: xl,
       [`col-xl-auto`]: xlAuto,
       "col-auto": auto,
+      [`offset-${offset}`]: offset,
+      [`offset-xs-${offsetXs}`]: offsetXs,
+      [`offset-sm-${offsetSm}`]: offsetSm,
+      [`offset-md-${offsetMd}`]: offsetMd,
+      [`offset-lg-${offsetLg}`]: offsetLg,
+      [`offset-xl-${offsetXl}`]: offsetXl,
     },
     className
   );