Add aspect ratio documentation (#1595)

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

tsia, copied markdown from https://yogalayout.dev/docs/aspect-ratio

Reviewed By: yungsters

Differential Revision: D54774755

fbshipit-source-id: 8b93c35c4efa69f942daa09458a315fc33578094

website-next/docs/examples/aspect-ratio.mdx

@@ -2,4 +2,26 @@
 sidebar_position: 3
 ---
 
+import Playground from '@site/src/components/Playground';
+
 # Aspect Ratio
+
+The `aspect ratio` property in Yoga has the following properties:
+
+- Accepts any floating point value > 0, the default is undefined.
+- Defined as the ratio between the `width` and the `height` of a node e.g. if a node has an aspect ratio of 2 then its `width` is twice the size of its `height`.
+- Respects the `min` and `max` dimensions of an item.
+- Has higher priority than `flex grow`
+- If `aspect ratio`, `width`, and `height` are set then the cross axis dimension is overridden.
+
+<Playground code={`<Layout config={{useWebDefaults: false}}>
+  <Node
+    style={{
+      width: 200,
+      height: 200,
+      padding: 20,
+    }}>
+    <Node style={{margin: 5, height: 50, aspectRatio: 1.0}} />
+    <Node style={{margin: 5, height: 50, aspectRatio: 1.5}} />
+  </Node>
+</Layout>`} />