@commercetools/nimbus-mcp 0.1.0 → 2.11.0

package/data/docs/routes/home-style-props-flex-and-grid.json

@@ -0,0 +1,496 @@
+{
+  "meta": {
+    "id": "Style Props-Flex and Grid",
+    "title": "Flex and Grid",
+    "description": "JSX style props to control flex and grid layouts",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/docs/flex-and-grid.mdx",
+    "menu": [
+      "Home",
+      "Style Props",
+      "Flex and Grid"
+    ],
+    "route": "home/style-props/flex-and-grid",
+    "tags": [
+      "document"
+    ],
+    "toc": [
+      {
+        "value": "Flex Basis",
+        "href": "#flex-basis",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Flex Direction",
+        "href": "#flex-direction",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Flex Wrap",
+        "href": "#flex-wrap",
+        "depth": 2,
+        "numbering": [
+          1,
+          3
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Flex",
+        "href": "#flex",
+        "depth": 2,
+        "numbering": [
+          1,
+          4
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Flex Grow",
+        "href": "#flex-grow",
+        "depth": 2,
+        "numbering": [
+          1,
+          5
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Flex Shrink",
+        "href": "#flex-shrink",
+        "depth": 2,
+        "numbering": [
+          1,
+          6
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Order",
+        "href": "#order",
+        "depth": 2,
+        "numbering": [
+          1,
+          7
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Gap",
+        "href": "#gap",
+        "depth": 2,
+        "numbering": [
+          1,
+          8
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Grid Template Columns",
+        "href": "#grid-template-columns",
+        "depth": 2,
+        "numbering": [
+          1,
+          9
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Grid Template Start/End",
+        "href": "#grid-template-startend",
+        "depth": 2,
+        "numbering": [
+          1,
+          10
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Grid Template Rows",
+        "href": "#grid-template-rows",
+        "depth": 2,
+        "numbering": [
+          1,
+          11
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Grid Row Start/End",
+        "href": "#grid-row-startend",
+        "depth": 2,
+        "numbering": [
+          1,
+          12
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Grid Autoflow",
+        "href": "#grid-autoflow",
+        "depth": 2,
+        "numbering": [
+          1,
+          13
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Grid Auto Columns",
+        "href": "#grid-auto-columns",
+        "depth": 2,
+        "numbering": [
+          1,
+          14
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Grid Auto Rows",
+        "href": "#grid-auto-rows",
+        "depth": 2,
+        "numbering": [
+          1,
+          15
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Justify Content",
+        "href": "#justify-content",
+        "depth": 2,
+        "numbering": [
+          1,
+          16
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Justify Items",
+        "href": "#justify-items",
+        "depth": 2,
+        "numbering": [
+          1,
+          17
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Align Content",
+        "href": "#align-content",
+        "depth": 2,
+        "numbering": [
+          1,
+          18
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Align Items",
+        "href": "#align-items",
+        "depth": 2,
+        "numbering": [
+          1,
+          19
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Align Self",
+        "href": "#align-self",
+        "depth": 2,
+        "numbering": [
+          1,
+          20
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Place Content",
+        "href": "#place-content",
+        "depth": 2,
+        "numbering": [
+          1,
+          21
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Place Items",
+        "href": "#place-items",
+        "depth": 2,
+        "numbering": [
+          1,
+          22
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Place Self",
+        "href": "#place-self",
+        "depth": 2,
+        "numbering": [
+          1,
+          23
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      }
+    ]
+  },
+  "mdx": "\n# Flex and Grid\n\nJSX style props to control flex and grid layouts\n\n## Flex Basis\n\nUse the `flexBasis` prop to set the initial main size of a flex item.\n\n```jsx\n<Flex>\n  <Box flexBasis=\"25%\" />\n  <Box flexBasis=\"25%\" />\n  <Box flexBasis=\"50%\" />\n</Flex>\n```\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `flexBasis` | `flex-basis` | -              |\n\n## Flex Direction\n\nUse the `flexDir` or `flexDirection` prop to set the direction of the main axis\nin a flex container.\n\n```jsx\n<Box display=\"flex\" flexDirection=\"column\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\nWhen using `Flex` component, the `direction` prop is aliased to `flexDirection`.\n\n```jsx\n<Flex direction=\"column\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Flex>\n```\n\n| Prop                       | CSS Property     | Token Category |\n| -------------------------- | ---------------- | -------------- |\n| `flexDir`, `flexDirection` | `flex-direction` | -              |\n\n## Flex Wrap\n\nUse the `flexWrap` prop to set whether flex items are forced onto one line or\ncan wrap onto multiple lines.\n\n```jsx\n<Box display=\"flex\" flexWrap=\"wrap\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\nWhen using `Flex` component, the `wrap` prop is aliased to `flexWrap`.\n\n```jsx\n<Flex wrap=\"wrap\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Flex>\n```\n\n| Prop       | CSS Property | Token Category |\n| ---------- | ------------ | -------------- |\n| `flexWrap` | `flex-wrap`  | -              |\n\n## Flex\n\nUse the `flex` prop to define the flexibility of a flex container or item.\n\n```jsx\n<Flex>\n  <Box flex=\"1\" />\n  <Box />\n</Flex>\n```\n\n| Prop   | CSS Property | Token Category |\n| ------ | ------------ | -------------- |\n| `flex` | `flex`       | -              |\n\n## Flex Grow\n\nUse the `flexGrow` prop to set the flex grow factor of a flex item.\n\n```jsx\n<Flex>\n  <Box flexGrow=\"0\" />\n  <Box flexGrow=\"1\" />\n</Flex>\n```\n\n| Prop       | CSS Property | Token Category |\n| ---------- | ------------ | -------------- |\n| `flexGrow` | `flex-grow`  | -              |\n\n## Flex Shrink\n\nUse the `flexShrink` prop to set the flex shrink factor of a flex item.\n\n```jsx\n<Flex>\n  <Box flexShrink=\"0\" />\n  <Box flexShrink=\"1\" />\n</Flex>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `flexShrink` | `flex-shrink` | -              |\n\n## Order\n\nUse the `order` prop to set the order of a flex item.\n\n```jsx\n<Flex>\n  <Box order=\"0\" />\n  <Box order=\"1\" />\n</Flex>\n```\n\n| Prop    | CSS Property | Token Category |\n| ------- | ------------ | -------------- |\n| `order` | `order`      | -              |\n\n## Gap\n\nUse the `gap` prop to set the gap between items in a flex or grid container.\n\n```jsx\n<Flex>\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Flex>\n```\n\n| Prop  | CSS Property | Token Category |\n| ----- | ------------ | -------------- |\n| `gap` | `gap`        | `spacing`      |\n\n## Grid Template Columns\n\nUse the `gridTemplateColumns` prop to define the columns of a grid container.\n\n```jsx\n<Box display=\"grid\" gridTemplateColumns=\"repeat(3, minmax(0, 1fr))\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\nWhen using `Grid` component, the `templateColumns` prop is aliased to\n`gridTemplateColumns`.\n\n```jsx\n<Grid templateColumns=\"repeat(3, minmax(0, 1fr))\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Grid>\n```\n\n## Grid Template Start/End\n\nUse the `gridTemplateStart` and `gridTemplateEnd` props to define the start and\nend of a grid container.\n\n```jsx\n<Box display=\"grid\" gridTemplateColumns=\"repeat(3, minmax(0, 1fr))\">\n  <Box>Item 1</Box>\n  <Box gridColumn=\"span 2 / span 2\">Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop                | CSS Property          | Token Category |\n| ------------------- | --------------------- | -------------- |\n| `gridTemplateStart` | `grid-template-start` | -              |\n| `gridTemplateEnd`   | `grid-template-end`   | -              |\n\n## Grid Template Rows\n\nUse the `gridTemplateRows` prop to define the rows of a grid container.\n\n```jsx\n<Box display=\"grid\" gridTemplateRows=\"repeat(3, minmax(0, 1fr))\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop               | CSS Property         | Token Category |\n| ------------------ | -------------------- | -------------- |\n| `gridTemplateRows` | `grid-template-rows` | -              |\n\n## Grid Row Start/End\n\nUse the `gridRowStart` and `gridRowEnd` props to define the start and end of a\ngrid item.\n\n```jsx\n<Box display=\"grid\" gridTemplateRows=\"repeat(3, minmax(0, 1fr))\">\n  <Box gridRowStart=\"1\" gridRowEnd=\"3\">\n    Item 1\n  </Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop           | CSS Property     | Token Category |\n| -------------- | ---------------- | -------------- |\n| `gridRowStart` | `grid-row-start` | -              |\n| `gridRowEnd`   | `grid-row-end`   | -              |\n\n## Grid Autoflow\n\nUse the `gridAutoFlow` prop to define how auto-placed items get flowed into the\ngrid.\n\n```jsx\n<Box display=\"grid\" gridAutoFlow=\"row\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop           | CSS Property     | Token Category |\n| -------------- | ---------------- | -------------- |\n| `gridAutoFlow` | `grid-auto-flow` | -              |\n\n## Grid Auto Columns\n\nUse the `gridAutoColumns` prop to specify the size of the grid columns that were\ncreated without an explicit size.\n\n```jsx\n<Box display=\"grid\" gridAutoColumns=\"120px\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop              | CSS Property        | Token Category |\n| ----------------- | ------------------- | -------------- |\n| `gridAutoColumns` | `grid-auto-columns` | -              |\n\n## Grid Auto Rows\n\nUse the `gridAutoRows` prop to specify the size of the grid rows that were\ncreated without an explicit size.\n\n```jsx\n<Box display=\"grid\" gridTemplateRows=\"200px\" gridAutoRows=\"120px\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop           | CSS Property     | Token Category |\n| -------------- | ---------------- | -------------- |\n| `gridAutoRows` | `grid-auto-rows` | -              |\n\n## Justify Content\n\nUse the `justifyContent` prop to align items along the main axis of a flex\ncontainer.\n\n```jsx\n<Box display=\"flex\" justifyContent=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\nWhen using the `Flex` component, the `justify` prop is aliased to\n`justifyContent`.\n\n```jsx\n<Flex justify=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Flex>\n```\n\n| Prop             | CSS Property      | Token Category |\n| ---------------- | ----------------- | -------------- |\n| `justifyContent` | `justify-content` | -              |\n\n## Justify Items\n\nUse the `justifyItems` prop to control the alignment of grid items within their\nscope.\n\n```jsx\n<Box display=\"grid\" justifyItems=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop           | CSS Property    | Token Category |\n| -------------- | --------------- | -------------- |\n| `justifyItems` | `justify-items` | -              |\n\n## Align Content\n\nUse the `alignContent` prop to align rows of content along the cross axis of a\nflex container when there's extra space.\n\n```jsx\n<Box display=\"flex\" alignContent=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\nWhen using the `Flex` component, the `align` prop is aliased to `alignContent`.\n\n```jsx\n<Flex align=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Flex>\n```\n\n| Prop           | CSS Property    | Token Category |\n| -------------- | --------------- | -------------- |\n| `alignContent` | `align-content` | -              |\n\n## Align Items\n\nUse the `alignItems` prop to control the alignment of grid items within their\nscope.\n\n```jsx\n<Box display=\"grid\" alignItems=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n## Align Self\n\nUse the `alignSelf` prop to control the alignment of a grid item within its\nscope.\n\n```jsx\n<Box display=\"grid\">\n  <Box alignSelf=\"center\">Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `alignSelf` | `align-self` | -              |\n\n## Place Content\n\nUse the `placeContent` prop to align content along both the block and inline\ndirections at once. It works like `justifyContent` and `alignContent` combined,\nand can be used in flex and grid containers.\n\n```jsx\n<Flex placeContent=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Flex>\n```\n\n| Prop           | CSS Property    | Token Category |\n| -------------- | --------------- | -------------- |\n| `placeContent` | `place-content` | -              |\n\n## Place Items\n\nUse the `placeItems` prop to align items along both the block and inline\ndirections at once. It works like `justifyItems` and `alignItems` combined, and\ncan be used in flex and grid containers.\n\n```jsx\n<Box display=\"grid\" placeItems=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `placeItems` | `place-items` | -              |\n\n## Place Self\n\nUse the `placeSelf` prop to align a grid item along both the block and inline\ndirections at once.\n\n```jsx\n<Box display=\"grid\">\n  <Box placeSelf=\"center\">Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `placeSelf` | `place-self` | -              |\n",
+  "views": {
+    "overview": {
+      "mdx": "\n# Flex and Grid\n\nJSX style props to control flex and grid layouts\n\n## Flex Basis\n\nUse the `flexBasis` prop to set the initial main size of a flex item.\n\n```jsx\n<Flex>\n  <Box flexBasis=\"25%\" />\n  <Box flexBasis=\"25%\" />\n  <Box flexBasis=\"50%\" />\n</Flex>\n```\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `flexBasis` | `flex-basis` | -              |\n\n## Flex Direction\n\nUse the `flexDir` or `flexDirection` prop to set the direction of the main axis\nin a flex container.\n\n```jsx\n<Box display=\"flex\" flexDirection=\"column\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\nWhen using `Flex` component, the `direction` prop is aliased to `flexDirection`.\n\n```jsx\n<Flex direction=\"column\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Flex>\n```\n\n| Prop                       | CSS Property     | Token Category |\n| -------------------------- | ---------------- | -------------- |\n| `flexDir`, `flexDirection` | `flex-direction` | -              |\n\n## Flex Wrap\n\nUse the `flexWrap` prop to set whether flex items are forced onto one line or\ncan wrap onto multiple lines.\n\n```jsx\n<Box display=\"flex\" flexWrap=\"wrap\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\nWhen using `Flex` component, the `wrap` prop is aliased to `flexWrap`.\n\n```jsx\n<Flex wrap=\"wrap\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Flex>\n```\n\n| Prop       | CSS Property | Token Category |\n| ---------- | ------------ | -------------- |\n| `flexWrap` | `flex-wrap`  | -              |\n\n## Flex\n\nUse the `flex` prop to define the flexibility of a flex container or item.\n\n```jsx\n<Flex>\n  <Box flex=\"1\" />\n  <Box />\n</Flex>\n```\n\n| Prop   | CSS Property | Token Category |\n| ------ | ------------ | -------------- |\n| `flex` | `flex`       | -              |\n\n## Flex Grow\n\nUse the `flexGrow` prop to set the flex grow factor of a flex item.\n\n```jsx\n<Flex>\n  <Box flexGrow=\"0\" />\n  <Box flexGrow=\"1\" />\n</Flex>\n```\n\n| Prop       | CSS Property | Token Category |\n| ---------- | ------------ | -------------- |\n| `flexGrow` | `flex-grow`  | -              |\n\n## Flex Shrink\n\nUse the `flexShrink` prop to set the flex shrink factor of a flex item.\n\n```jsx\n<Flex>\n  <Box flexShrink=\"0\" />\n  <Box flexShrink=\"1\" />\n</Flex>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `flexShrink` | `flex-shrink` | -              |\n\n## Order\n\nUse the `order` prop to set the order of a flex item.\n\n```jsx\n<Flex>\n  <Box order=\"0\" />\n  <Box order=\"1\" />\n</Flex>\n```\n\n| Prop    | CSS Property | Token Category |\n| ------- | ------------ | -------------- |\n| `order` | `order`      | -              |\n\n## Gap\n\nUse the `gap` prop to set the gap between items in a flex or grid container.\n\n```jsx\n<Flex>\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Flex>\n```\n\n| Prop  | CSS Property | Token Category |\n| ----- | ------------ | -------------- |\n| `gap` | `gap`        | `spacing`      |\n\n## Grid Template Columns\n\nUse the `gridTemplateColumns` prop to define the columns of a grid container.\n\n```jsx\n<Box display=\"grid\" gridTemplateColumns=\"repeat(3, minmax(0, 1fr))\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\nWhen using `Grid` component, the `templateColumns` prop is aliased to\n`gridTemplateColumns`.\n\n```jsx\n<Grid templateColumns=\"repeat(3, minmax(0, 1fr))\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Grid>\n```\n\n## Grid Template Start/End\n\nUse the `gridTemplateStart` and `gridTemplateEnd` props to define the start and\nend of a grid container.\n\n```jsx\n<Box display=\"grid\" gridTemplateColumns=\"repeat(3, minmax(0, 1fr))\">\n  <Box>Item 1</Box>\n  <Box gridColumn=\"span 2 / span 2\">Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop                | CSS Property          | Token Category |\n| ------------------- | --------------------- | -------------- |\n| `gridTemplateStart` | `grid-template-start` | -              |\n| `gridTemplateEnd`   | `grid-template-end`   | -              |\n\n## Grid Template Rows\n\nUse the `gridTemplateRows` prop to define the rows of a grid container.\n\n```jsx\n<Box display=\"grid\" gridTemplateRows=\"repeat(3, minmax(0, 1fr))\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop               | CSS Property         | Token Category |\n| ------------------ | -------------------- | -------------- |\n| `gridTemplateRows` | `grid-template-rows` | -              |\n\n## Grid Row Start/End\n\nUse the `gridRowStart` and `gridRowEnd` props to define the start and end of a\ngrid item.\n\n```jsx\n<Box display=\"grid\" gridTemplateRows=\"repeat(3, minmax(0, 1fr))\">\n  <Box gridRowStart=\"1\" gridRowEnd=\"3\">\n    Item 1\n  </Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop           | CSS Property     | Token Category |\n| -------------- | ---------------- | -------------- |\n| `gridRowStart` | `grid-row-start` | -              |\n| `gridRowEnd`   | `grid-row-end`   | -              |\n\n## Grid Autoflow\n\nUse the `gridAutoFlow` prop to define how auto-placed items get flowed into the\ngrid.\n\n```jsx\n<Box display=\"grid\" gridAutoFlow=\"row\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop           | CSS Property     | Token Category |\n| -------------- | ---------------- | -------------- |\n| `gridAutoFlow` | `grid-auto-flow` | -              |\n\n## Grid Auto Columns\n\nUse the `gridAutoColumns` prop to specify the size of the grid columns that were\ncreated without an explicit size.\n\n```jsx\n<Box display=\"grid\" gridAutoColumns=\"120px\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop              | CSS Property        | Token Category |\n| ----------------- | ------------------- | -------------- |\n| `gridAutoColumns` | `grid-auto-columns` | -              |\n\n## Grid Auto Rows\n\nUse the `gridAutoRows` prop to specify the size of the grid rows that were\ncreated without an explicit size.\n\n```jsx\n<Box display=\"grid\" gridTemplateRows=\"200px\" gridAutoRows=\"120px\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop           | CSS Property     | Token Category |\n| -------------- | ---------------- | -------------- |\n| `gridAutoRows` | `grid-auto-rows` | -              |\n\n## Justify Content\n\nUse the `justifyContent` prop to align items along the main axis of a flex\ncontainer.\n\n```jsx\n<Box display=\"flex\" justifyContent=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\nWhen using the `Flex` component, the `justify` prop is aliased to\n`justifyContent`.\n\n```jsx\n<Flex justify=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Flex>\n```\n\n| Prop             | CSS Property      | Token Category |\n| ---------------- | ----------------- | -------------- |\n| `justifyContent` | `justify-content` | -              |\n\n## Justify Items\n\nUse the `justifyItems` prop to control the alignment of grid items within their\nscope.\n\n```jsx\n<Box display=\"grid\" justifyItems=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop           | CSS Property    | Token Category |\n| -------------- | --------------- | -------------- |\n| `justifyItems` | `justify-items` | -              |\n\n## Align Content\n\nUse the `alignContent` prop to align rows of content along the cross axis of a\nflex container when there's extra space.\n\n```jsx\n<Box display=\"flex\" alignContent=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\nWhen using the `Flex` component, the `align` prop is aliased to `alignContent`.\n\n```jsx\n<Flex align=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Flex>\n```\n\n| Prop           | CSS Property    | Token Category |\n| -------------- | --------------- | -------------- |\n| `alignContent` | `align-content` | -              |\n\n## Align Items\n\nUse the `alignItems` prop to control the alignment of grid items within their\nscope.\n\n```jsx\n<Box display=\"grid\" alignItems=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n## Align Self\n\nUse the `alignSelf` prop to control the alignment of a grid item within its\nscope.\n\n```jsx\n<Box display=\"grid\">\n  <Box alignSelf=\"center\">Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `alignSelf` | `align-self` | -              |\n\n## Place Content\n\nUse the `placeContent` prop to align content along both the block and inline\ndirections at once. It works like `justifyContent` and `alignContent` combined,\nand can be used in flex and grid containers.\n\n```jsx\n<Flex placeContent=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Flex>\n```\n\n| Prop           | CSS Property    | Token Category |\n| -------------- | --------------- | -------------- |\n| `placeContent` | `place-content` | -              |\n\n## Place Items\n\nUse the `placeItems` prop to align items along both the block and inline\ndirections at once. It works like `justifyItems` and `alignItems` combined, and\ncan be used in flex and grid containers.\n\n```jsx\n<Box display=\"grid\" placeItems=\"center\">\n  <Box>Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop         | CSS Property  | Token Category |\n| ------------ | ------------- | -------------- |\n| `placeItems` | `place-items` | -              |\n\n## Place Self\n\nUse the `placeSelf` prop to align a grid item along both the block and inline\ndirections at once.\n\n```jsx\n<Box display=\"grid\">\n  <Box placeSelf=\"center\">Item 1</Box>\n  <Box>Item 2</Box>\n  <Box>Item 3</Box>\n</Box>\n```\n\n| Prop        | CSS Property | Token Category |\n| ----------- | ------------ | -------------- |\n| `placeSelf` | `place-self` | -              |\n",
+      "toc": [
+        {
+          "value": "Flex Basis",
+          "href": "#flex-basis",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Flex Direction",
+          "href": "#flex-direction",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Flex Wrap",
+          "href": "#flex-wrap",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Flex",
+          "href": "#flex",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Flex Grow",
+          "href": "#flex-grow",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Flex Shrink",
+          "href": "#flex-shrink",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Order",
+          "href": "#order",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Gap",
+          "href": "#gap",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Grid Template Columns",
+          "href": "#grid-template-columns",
+          "depth": 2,
+          "numbering": [
+            1,
+            9
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Grid Template Start/End",
+          "href": "#grid-template-startend",
+          "depth": 2,
+          "numbering": [
+            1,
+            10
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Grid Template Rows",
+          "href": "#grid-template-rows",
+          "depth": 2,
+          "numbering": [
+            1,
+            11
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Grid Row Start/End",
+          "href": "#grid-row-startend",
+          "depth": 2,
+          "numbering": [
+            1,
+            12
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Grid Autoflow",
+          "href": "#grid-autoflow",
+          "depth": 2,
+          "numbering": [
+            1,
+            13
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Grid Auto Columns",
+          "href": "#grid-auto-columns",
+          "depth": 2,
+          "numbering": [
+            1,
+            14
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Grid Auto Rows",
+          "href": "#grid-auto-rows",
+          "depth": 2,
+          "numbering": [
+            1,
+            15
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Justify Content",
+          "href": "#justify-content",
+          "depth": 2,
+          "numbering": [
+            1,
+            16
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Justify Items",
+          "href": "#justify-items",
+          "depth": 2,
+          "numbering": [
+            1,
+            17
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Align Content",
+          "href": "#align-content",
+          "depth": 2,
+          "numbering": [
+            1,
+            18
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Align Items",
+          "href": "#align-items",
+          "depth": 2,
+          "numbering": [
+            1,
+            19
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Align Self",
+          "href": "#align-self",
+          "depth": 2,
+          "numbering": [
+            1,
+            20
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Place Content",
+          "href": "#place-content",
+          "depth": 2,
+          "numbering": [
+            1,
+            21
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Place Items",
+          "href": "#place-items",
+          "depth": 2,
+          "numbering": [
+            1,
+            22
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Place Self",
+          "href": "#place-self",
+          "depth": 2,
+          "numbering": [
+            1,
+            23
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}