diff --git a/front/src/components/ui/Layout.vue b/front/src/components/ui/Layout.vue
index 0b1943d79..6061f9aca 100644
--- a/front/src/components/ui/Layout.vue
+++ b/front/src/components/ui/Layout.vue
@@ -25,9 +25,9 @@ const attributes = computed(() => ({
   ...color(props)(width(props)()),
   layout:
     props.grid === true ? 'grid' :
-      props.grid ? 'grid-custom' :
-        props.flex ? 'flex' :
-          props.columns ? 'columns' :
+      typeof props.grid === 'string' ? 'grid-custom' :
+        props.flex === true ? 'flex' :
+          props.columns=== true  ? 'columns' :
             'stack'
 }))
 </script>
diff --git a/front/ui-docs/components/ui/layout.md b/front/ui-docs/components/ui/layout.md
index e7af845dc..ced7f8a5e 100644
--- a/front/ui-docs/components/ui/layout.md
+++ b/front/ui-docs/components/ui/layout.md
@@ -43,7 +43,7 @@ The following containers are responsive. Change your window's size or select a d
       <Button outline icon="bi-eye" />
       <Button destructive icon="bi-eye" />
     </Layout></Card>
-  <Card width="163px" title="columns" to="./layout/columns" >
+  <Card width="163px" title="columns" to="/components/ui/layout/columns" >
     <Layout columns column-width="40" style="outline: 4px dashed var(--border-color)">
       <Button primary icon="bi-eye" />
       <Button outline icon="bi-eye" />
diff --git a/front/ui-docs/components/ui/layout/columns.md b/front/ui-docs/components/ui/layout/columns.md
index f7ebaeefb..3d3c7d7fd 100644
--- a/front/ui-docs/components/ui/layout/columns.md
+++ b/front/ui-docs/components/ui/layout/columns.md
@@ -39,7 +39,7 @@ Normal paragraph. Text flows like in a newspaper. Set the column width in px. Co
 ```
 
 <div class="preview">
-<Layout columns :column-width="120">
+<Layout columns column-width="120px">
   <Button icon="bi-star"/>
   <Button icon="bi-star"/>
   <Button icon="bi-star"/>
@@ -50,7 +50,7 @@ Normal paragraph. Text flows like in a newspaper. Set the column width in px. Co
 
 ---
 
-<Card min-content title="Cards...">...break over columns...</Card>
+<Card auto title="Cards...">...break over columns...</Card>
 
 ---
 
@@ -66,24 +66,24 @@ Make sure that all elements fit the column width, else they will leak into the n
 
 ### `no-rule`: Remove the rule (thin line) between columns
 
-<Layout grid>
+<Layout columns column-width="300px">
 
 ```vue-html
-<Layout columns :colummn-width="50">
+<Layout columns column-width="40px">
   <div>Lorem ipsum dolor sit amet.</div>
 </Layout>
 
-<Layout columns :colummn-width="50" no-rule>
+<Layout columns no-rule column-width="40px">
   <div>Lorem ipsum dolor sit amet.</div>
 </Layout>
 ```
 
 <Layout class="preview">
-  <Layout columns :column-width="40">
+  <Layout columns column-width="40px">
     <div>Lorem ipsum dolor sit amet.</div>
   </Layout>
 
-  <Layout columns no-rule :column-width="40">
+  <Layout columns no-rule column-width="40px">
     <div>Lorem ipsum dolor sit amet.</div>
   </Layout>
 </Layout>