From 25c6d9f0317a8576d7ab331fb0c714131a819c10 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Tue, 7 Nov 2023 15:05:28 +0100
Subject: [PATCH] docs

---
 book/src/guides/layout.md | 41 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/book/src/guides/layout.md b/book/src/guides/layout.md
index f9fdcf1e1..ff6d85cc6 100644
--- a/book/src/guides/layout.md
+++ b/book/src/guides/layout.md
@@ -6,9 +6,11 @@ Learn how the layout attributes work.
 - [`min_width & min_height`](#min_width--min_height)
 - [`max_width & max_height`](#max_width--max_height)
 - [`Size units`](#size_units)
+  - [`auto`](#auto)
   - [`Logical pixels`](#logical-pixels)
   - [`Percentages`](#percentages)
   - [`calc()`](#calc)
+  - [`fill`](#fill)
 - [`direction`](#direction)
 - [`padding`](#padding)
 - [`margin`](#margin)
@@ -81,6 +83,23 @@ fn app(cx: Scope) -> Element {
 
 ### Size Units
 
+#### Auto
+Will use it's inner children as size, so in this case, the `rect` width will be defined bu the width of `label`:
+
+```rust, no_run
+fn app(cx: Scope) -> Element {
+    render!(
+        rect {
+            width: "auto",
+            height: "33",
+            label {
+                "hello!"
+            }
+        }
+    )
+}
+```
+
 #### Logical pixels
 
 ```rust, no_run
@@ -108,6 +127,28 @@ fn app(cx: Scope) -> Element {
 }
 ```
 
+#### fill
+Use the remaining available space from the parent area:
+
+```rust, no_run
+fn app(cx: Scope) -> Element {
+    render!(
+        rect {
+            width: "100%",
+            height: "100%",
+            rect {
+                height: "200",
+                width: "100%",
+            }
+            rect {
+                height: "fill", // This is the same as calc(100% - 200)
+                width: "100%",
+            }
+        }
+    )
+}
+```
+
 #### `calc()`
 
 For more complex logic you can use the `calc()` function.