diff --git a/front/src/components/ui/Layout.vue b/front/src/components/ui/Layout.vue
index 3295141d2..354ef858c 100644
--- a/front/src/components/ui/Layout.vue
+++ b/front/src/components/ui/Layout.vue
@@ -3,7 +3,7 @@ import { useCssModule } from 'vue'
const props = defineProps<
{ columnWidth?: number, noGap?:true }
- & { [P in "stack" | "grid" | "flex"]?: true }
+ & { [P in "stack" | "grid" | "flex" | "columns"]?: true }
& { [C in "nav" | "aside" | "header" | "footer" | "main"]?:true }>()
const classes = useCssModule()
const columnWidth = props.columnWidth ?? 320
@@ -17,7 +17,8 @@ const columnWidth = props.columnWidth ?? 320
noGap || classes.gap,
props.grid ? classes.grid
: props.flex ? classes.flex
- : classes.stack
+ : props.columns? classes.columns
+ : classes.stack
]">
@@ -39,6 +40,12 @@ const columnWidth = props.columnWidth ?? 320
flex-grow:0;
}
}
+ &.columns{
+ column-count: auto;
+ column-width: calc(v-bind(columnWidth) * 1px);
+ display: block;
+ column-rule: 1px solid var(--border-color);
+ }
&.grid {
display: grid;
grid-template-columns:
diff --git a/front/ui-docs/components/ui/layout.md b/front/ui-docs/components/ui/layout.md
index 224e08a75..809dc8756 100644
--- a/front/ui-docs/components/ui/layout.md
+++ b/front/ui-docs/components/ui/layout.md
@@ -150,6 +150,36 @@ Add space between vertically stacked items
+
+
+Let items flow like words on a printed newspaper, Great for very long lists of buttons or links.
+
+
+
+```vue-html
+
+
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
## Common props