diff --git a/example/test.re b/example/test.re
index c348ccf..aa405b9 100644
--- a/example/test.re
+++ b/example/test.re
@@ -498,18 +498,29 @@ let tests =
           )
         />
       </div>
+      <div className=Css.(style([display(`grid), gridAutoFlow(`row)]))>
+        <div className=Css.(style([background(purple)]))>
+          {text("grid auto direction row")}
+        </div>
+        <div className=Css.(style([background(green)]))>
+          {text("grid auto direction row")}
+        </div>
+      </div>
       <div
         className=Css.(
           style([
             display(`grid),
-            gridAutoFlow(`row)
+            gridTemplateColumns([100->px, `repeat((`num(2), 60->px))]),
           ])
         )>
         <div className=Css.(style([background(purple)]))>
-          {text("grid auto direction row")}
+          {text("Grid track repeat")}
         </div>
         <div className=Css.(style([background(green)]))>
-          {text("grid auto direction row")}
+          {text("two times")}
+        </div>
+        <div className=Css.(style([background(red)]))>
+          {text("three times")}
         </div>
       </div>
     </Section>
diff --git a/src/Css.re b/src/Css.re
index 1963f48..832d41e 100644
--- a/src/Css.re
+++ b/src/Css.re
@@ -3,8 +3,7 @@ include Css_Colors;
 module Emotion = {
   type css = string;
   [@bs.module "emotion"] external _make: Js.Json.t => css = "css";
-  [@bs.module "emotion"]
-  external injectGlobal: Js.Json.t => unit = "";
+  [@bs.module "emotion"] external injectGlobal: Js.Json.t => unit = "";
   [@bs.module "emotion"]
   external rawInjectGlobal: string => unit = "injectGlobal";
   [@bs.module "emotion"]
@@ -291,9 +290,12 @@ type selector = [ | `selector(string, list(rule))];
 let empty = [];
 
 let merge = List.concat;
-let global = (selector, rules: list(rule)) => {
-  Emotion.injectGlobal([(selector, Emotion.makeDict(rules))]->Js.Dict.fromList->Js.Json.object_);
-}
+let global = (selector, rules: list(rule)) =>
+  Emotion.injectGlobal(
+    [(selector, Emotion.makeDict(rules))]
+    ->Js.Dict.fromList
+    ->Js.Json.object_,
+  );
 
 let insertRule = raw => Emotion.rawInjectGlobal(raw);
 
@@ -391,8 +393,6 @@ type length = [
   | `zero
 ];
 
-type gridLength = [ length | `fr(float) | `minContent | `maxContent];
-
 let string_of_length_cascading =
   fun
   | `calc(`add, a, b) =>
@@ -812,8 +812,46 @@ let gridAutoDirectionToJs =
 let gridAutoFlow = direction =>
   d("gridAutoFlow", gridAutoDirectionToJs(direction));
 
+type repeatValue = [ | `autoFill | `autoFit | `num(int)];
+let repeatValueToJs =
+  fun
+  | `autoFill => "auto-fill"
+  | `autoFit => "auto-fit"
+  | `num(x) => x->string_of_int;
+
+type trackLength = [ length | `fr(float) | `minContent | `maxContent];
+type gridLength = [ trackLength | `repeat(repeatValue, trackLength)];
+
+let gridLengthToJs =
+  fun
+  | `auto => "auto"
+  | `calc(`add, a, b) =>
+    "calc(" ++ string_of_length(a) ++ " + " ++ string_of_length(b) ++ ")"
+  | `calc(`sub, a, b) =>
+    "calc(" ++ string_of_length(a) ++ " - " ++ string_of_length(b) ++ ")"
+  | `ch(x) => string_of_float(x) ++ "ch"
+  | `cm(x) => string_of_float(x) ++ "cm"
+  | `em(x) => string_of_float(x) ++ "em"
+  | `ex(x) => string_of_float(x) ++ "ex"
+  | `mm(x) => string_of_float(x) ++ "mm"
+  | `percent(x) => string_of_float(x) ++ "%"
+  | `pt(x) => string_of_int(x) ++ "pt"
+  | `px(x) => string_of_int(x) ++ "px"
+  | `pxFloat(x) => string_of_float(x) ++ "px"
+  | `rem(x) => string_of_float(x) ++ "rem"
+  | `vh(x) => string_of_float(x) ++ "vh"
+  | `vmax(x) => string_of_float(x) ++ "vmax"
+  | `vmin(x) => string_of_float(x) ++ "vmin"
+  | `vw(x) => string_of_float(x) ++ "vw"
+  | `fr(x) => string_of_float(x) ++ "fr"
+  | `zero => "0"
+  | `minContent => "min-content"
+  | `maxContent => "max-content"
+  | `repeat(n, x) =>
+    "repeat(" ++ n->repeatValueToJs ++ ", " ++ string_of_dimension(x) ++ ")";
+
 let string_of_dimensions = dimensions =>
-  dimensions |> List.map(string_of_dimension) |> String.concat(" ");
+  dimensions |> List.map(gridLengthToJs) |> String.concat(" ");
 
 let gridTemplateColumns = dimensions =>
   d("gridTemplateColumns", string_of_dimensions(dimensions));
diff --git a/src/Css.rei b/src/Css.rei
index 4ab5bb1..7053687 100644
--- a/src/Css.rei
+++ b/src/Css.rei
@@ -236,7 +236,9 @@ type length = [
   | `zero
 ];
 
-type gridLength = [ length | `fr(float) | `minContent | `maxContent];
+type repeatValue = [ | `autoFill | `autoFit | `num(int)];
+type trackLength = [ length | `fr(float) | `minContent | `maxContent];
+type gridLength = [ trackLength | `repeat(repeatValue, trackLength)];
 
 let ch: float => [> | `ch(float)];
 let cm: float => [> | `cm(float)];
@@ -463,14 +465,17 @@ let order: int => rule;
 let gridTemplateColumns: list([ gridLength | `auto]) => rule;
 let gridTemplateRows: list([ gridLength | `auto]) => rule;
 let gridAutoRows: [ length | `auto] => rule;
-let gridAutoFlow:  [ 
-  | `column 
-  | `row 
-  |  `columnDense 
-  |  `rowDense 
-  | `inherit_
-  | `initial 
-  | `unset ] => rule;
+let gridAutoFlow:
+  [
+    | `column
+    | `row
+    | `columnDense
+    | `rowDense
+    | `inherit_
+    | `initial
+    | `unset
+  ] =>
+  rule;
 let gridColumn: (int, int) => rule;
 let gridRow: (int, int) => rule;
 let gridColumnStart: int => rule;
@@ -534,14 +539,7 @@ let alignItems:
   [ | `stretch | `flexStart | `center | `flexEnd | `baseline] => rule;
 let alignSelf:
   [ | `stretch | `flexStart | `center | `flexEnd | `baseline | `auto] => rule;
-let justifySelf:
-  [
-    | `flexStart
-    | `center
-    | `flexEnd
-    | `stretch
-  ] =>
-  rule;
+let justifySelf: [ | `flexStart | `center | `flexEnd | `stretch] => rule;
 let justifyContent:
   [
     | `flexStart
@@ -565,7 +563,7 @@ let overflowY: [ | `hidden | `visible | `scroll | `auto] => rule;
 let zIndex: int => rule;
 let contentRule: string => rule;
 
-let columnCount: [ | `auto | `count(int) | cascading ] => rule;
+let columnCount: [ | `auto | `count(int) | cascading] => rule;
 
 /**
  * Style
@@ -622,7 +620,7 @@ let boxShadow:
 let boxShadows: list([ | `shadow(string)]) => rule;
 
 let background: [ color | `url(string) | gradient | `none] => rule;
-let backgrounds : list([ | color | `url(string) | gradient | `none] ) => rule;
+let backgrounds: list([ color | `url(string) | gradient | `none]) => rule;
 let backgroundColor: [ color] => rule;
 let backgroundImage: [ | `url(string) | gradient | `none] => rule;
 let backgroundAttachment: [ | `scroll | `fixed | `local] => rule;