fix(ui): regression in `Layout grid`

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' :
+      typeof props.grid === 'string' ? 'grid-custom' :
-        props.flex ? 'flex' :
+        props.flex === true ? 'flex' :
-          props.columns ? 'columns' :
+          props.columns=== true  ? 'columns' :
             'stack'
 }))
 </script>

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" />

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>