Vertical Lines using Multi-Column

[danielgros]

Current Behavior

Desired Behavior

vertical lines or some other minimal way of separating each column

Source Code

> [!multi-column]
>
>> [!blank]
>> #### Sunday
>>Breakfast
>>- [[Health/Nutrition/Recipes/Chicken.md|Chicken]]
>>
>>Lunch
>>- [[Health/Nutrition/Recipes/Pasta Salad.md|Pasta Salad]]
>>
>>Dinner
>>- [[Health/Nutrition/Recipes/Baked Small Potatoes.md|Baked Small Potatoes]]
>>
> 
> > [!blank]
> > #### Monday
> > 
>>Breakfast
>>- [[Health/Nutrition/Recipes/Chicken.md|Chicken]]
>>
>>Lunch
>>- [[Health/Nutrition/Recipes/Pasta Salad.md|Pasta Salad]]
>>
>>Dinner
>>- [[Health/Nutrition/Recipes/Baked Small Potatoes.md|Baked Small Potatoes]]
>>
>
> > [!blank]
> > #### Tuesday
>
> > [!blank]
> > #### Wednesday
>
> > [!blank]
> > #### Thursday
> 
> > [!blank]
> > #### Friday
> 
> > [!blank]
> > #### Saturday

Question

Is there a way using multi-column (or some other way) to separate each column with a vertical line or some other minimal separator? The callouts are too much. For example, the following image is not desired behavior

What are some more minimal ways for me to separate it?

[holroy]

After a longer detour with operating system upgrade grievances, CSS issues related to faulty symlinks, a test vault dysfunctional due to missing linkage, I finally got around to doing something on this request!

Try the following snippets and see if that doesn’t do what you want:

[data-callout="multi-column"] > .callout-content {
    & > div { 
        border-right: 3px dashed yellow;
        border-collapse: collapse;
    }
    & > div:last-child {
        border: none;
    }
}

Disclaimer: I’m no designer and I’m looking to get a difference, not something stylish! The code above gave this output on your example document: