Источник
Obsidian is a markdown-based editor and it does not have any support for multiple-column layout.
But thanks to the Obsidian community, there are lots of options available.
In this article, we’ll talk about creating multiple-column layouts in Obsidian with the help of modular CSS layout.
Below is a screenshot from the Life OS vault I created at the beginning of the year. This beautiful look is all possible with the help of multi-column layouts.
You can watch the setup video here.
Doesn’t it look beautiful?
Of course, it does.
In this article, we’ll learn how you can create multi-column layouts in your Obsidian notes.
Modular CSS Layout for Obsidian
Obsidian Modular CSS layout by Faiz Khuzaimah is a CSS repository with CSS layout hacks. It has the following three CSS snippets.
- MCL Gallery Cards: It lets you create Image gallery
- MCL Multi Column: It lets you create multi-column layout in your notes
- MCL Wide Views: It provides support for full-width page per note basis
We’ll only talk about multi-column CSS in this article
Adding CSS snippets
Adding CSS snippets to your vault is easy. Here’s a step-by-step guide.
Download the MCL multi-column CSS file from the repository and add it to your vault.
Once you add it. Enable the CSS snippet.
Now let’s learn how you can create the multi-column layout with this MCL multi column CSS.
Multi-Columns with Callouts
There are a few different ways to create the multi-column layout. Let’s first talk about creating one with callouts.
For that, first, you need to create a multicolumn callout. It is a custom callout type created with the CSS.
Then you need to create sub callout under the multi-columncallout.
Multi
Work
your notes or lists here. using markdown formatting
Personal
your notes or lists here. using markdown formatting
Charity
your notes or lists here. using markdown formatting
Note: Two callouts should be separated by leaving a line. The line separating callouts should use only 1 angle bracket. (>)
You can also nest callout under the sub-callouts.
Easy, peasy.
Float Callout
Float callout allows you to create a side node or info box either to the right or either to the left side of the main note.
Here’s how to create a float callout.
Info
Addition note to the main article
Content of the main article
Add left or right to the regular callout. And make sure the callout is above the content you want to have it wrapped around.
You can also adjust the width of the callout to suit your needs. These 3 width options are available.
- -small: default width 300px
- -medium: default width 400px
- -large: default width 600px
Blank Callout
The blank callout is a custom callout that removes the decoration around it. It provides an invisible container for the callout.
Multi
Work
Work
your notes or lists here. using markdown formatting your notes or lists here. using markdown formatting
Personal
your notes or lists here. using markdown formatting
Charity
your notes or lists here. using markdown formatting
The middle callout here is a blank callout.
This can be useful in cases where you want to have an invisible container for the embedded content.
List Column, List Grid, & List Card
List layout allows you to create multi-column layout using unordered list.
You can use #mcl/list-column on the top-level list to create one.
List grid callout allows you to create multiple columns and multiple rows using unordered list.
You can do this simply by changing the hashtag in the unordered list from #mcl-list-column to #mcl-list-grid.
List card is similar to the grid layout but it has some extra customization to give it card like look.
Use #mcl-list-card on the top-level list item for this.
Conclusion
These are some basics on how you can create multiple column layouts in Obsidian with the help of Obsidian modular CSS layout.
You can explore more features from this documentation section, like width control and using Cssclasses.
Multi-column CSS from modular CSS layout is a great way to enhance your experience in Obsidian. This can help you to create your notes better.
It can be useful, especially in cases where you want to create homepage setups or dashboard setups.