diff --git a/website-next/docs/styling/gap.mdx b/website-next/docs/styling/gap.mdx
index 0d7d5fc6..998d5e58 100644
--- a/website-next/docs/styling/gap.mdx
+++ b/website-next/docs/styling/gap.mdx
@@ -1,5 +1,49 @@
---
sidebar_position: 8
---
+import Playground from '@site/src/components/Playground';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
# Gap
+
+Gap will add spacing between the rows and columns of a flex container. You can
+specify if you want the gaps to be between only the rows, only the columns, or
+both. You can do this by passing in the corresponding gutter value to the API,
+for example
+
+
+
+```cpp
+YGNodeStyleSetGap(node, YGGutterRow, amount);
+```
+
+
+```java
+node.setGap(YogaGutter.ROW, amount);
+```
+
+
+```typescript
+node.setGap(Gutter.Row, amount);
+```
+
+
+
+
+
+
+
+
+
+
+
+
+`} />