From cafffebbe30d7429763e91af3a18d16b389d63eb Mon Sep 17 00:00:00 2001
From: Joe Vilches <joevilches@meta.com>
Date: Wed, 13 Mar 2024 14:07:44 -0700
Subject: [PATCH] Add gap documentation (#1619)

Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1619

Reviewed By: NickGerleman

Differential Revision: D54859536

fbshipit-source-id: 8d351379bf6da936678bee22b208f7b6f5d161b8
---
 website-next/docs/styling/gap.mdx | 44 +++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

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
+
+<Tabs groupId="language">
+<TabItem value="cpp" label="C/C++">
+```cpp
+YGNodeStyleSetGap(node, YGGutterRow, amount);
+```
+</TabItem>
+<TabItem value="java" label="Java">
+```java
+node.setGap(YogaGutter.ROW, amount);
+```
+</TabItem>
+<TabItem value="ts" label="Typescript">
+```typescript
+node.setGap(Gutter.Row, amount);
+```
+</TabItem>
+</Tabs>
+
+
+<Playground code={`<Layout config={{useWebDefaults: false}}>
+  <Node
+    style={{
+      width: 200,
+      height: 250,
+      padding: 10,
+      flexWrap: 'wrap',
+      gap: 10,
+    }}>
+    <Node style={{height: 50, width: 50}} />
+    <Node style={{height: 50, width: 50}} />
+    <Node style={{height: 50, width: 50}} />
+    <Node style={{height: 50, width: 50}} />
+    <Node style={{height: 50, width: 50}} />
+  </Node>
+</Layout>`} />