diff --git a/front/ui-docs/components/ui/layout.md b/front/ui-docs/components/ui/layout.md
index 38ca0eca7..78d8d712f 100644
--- a/front/ui-docs/components/ui/layout.md
+++ b/front/ui-docs/components/ui/layout.md
@@ -1,4 +1,4 @@
-
+
+🡔 [Layout](../layout)
+
+# Layout `columns`
+
+Let items flow like words on a printed newspaper, Great for very long lists of buttons or links.
+
+
+
+```vue-html
+
+
+
+
+
+Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.
+
+ ...break over columns...
+
+
+
+
+
+```
+
+
+
+
+
+
+
+---
+
+Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.
+
+---
+
+...break over columns...
+
+---
+
+
+
+
+
+
+
+
+
+Make sure that all elements fit the column width, else they will leak into the neighboring columns.
+
+### `no-rule`: Remove the rule (thin line) between columns
+
+
+
+```vue-html
+
+
Lorem ipsum dolor sit amet.
+
+
+
+
Lorem ipsum dolor sit amet.
+
+```
+
+
+
+
Lorem ipsum dolor sit amet.
+
+
+
+
Lorem ipsum dolor sit amet.
+
+
+
+
+
+### Tricks
+
+#### Prevent column breaks
+
+Add the following style to the element that you want to preserve whole:
+
+```css
+style="break-inside: avoid;"
+```
diff --git a/front/ui-docs/components/ui/layout/flex.md b/front/ui-docs/components/ui/layout/flex.md
new file mode 100644
index 000000000..fbd8149ce
--- /dev/null
+++ b/front/ui-docs/components/ui/layout/flex.md
@@ -0,0 +1,58 @@
+
+
+🡔 [Layout](../layout)
+
+# Layout `flex`
+
+Items are laid out in a row and wrapped as they overflow the container.
+By default, all items in a row assume the same (maximum) height.
+
+```vue-html
+
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+
+## Use additional `flexbox` properties
+
+
+
+--gap: 4px
+
+align-self: flex-end
+flex-grow: 1
+height: 5rem
+width: 100%
+
+
+Find a list of all styles here: [Flexbox guide on css-tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
diff --git a/front/ui-docs/components/ui/layout/grid.md b/front/ui-docs/components/ui/layout/grid.md
new file mode 100644
index 000000000..98930ff40
--- /dev/null
+++ b/front/ui-docs/components/ui/layout/grid.md
@@ -0,0 +1,78 @@
+
+
+🡔 [Layout](../layout)
+
+# Layout `grid`
+
+Align items both vertically and horizontally.
+You can either specify the column width (default: 320px) or set the desired number of columns.
+
+### Override the `:column-width` (in px):
+
+
+
+```vue-html{1}
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+### Let elements span multiple rows or columns:
+
+```vue-html{1,2}
+
+
+
+
+```
+
+
+
+
+
+
+
+
+### Custom grid configuration
+
+You can pass any valid CSS `grid` value to the `grid` prop:
+
+```vue-html
+
+
+
+
+
+```
+
+
+
+
+
+
diff --git a/front/ui-docs/components/ui/layout/stack.md b/front/ui-docs/components/ui/layout/stack.md
new file mode 100644
index 000000000..f6935027e
--- /dev/null
+++ b/front/ui-docs/components/ui/layout/stack.md
@@ -0,0 +1,45 @@
+
+
+🡔 [Layout](../layout)
+
+# Layout `stack`
+
+Add space between vertically stacked items
+
+
+
+```vue-html
+
+
+
+
+
+
+
+```
+
+