obsidian.css.masonry-mode.css

:root {
  /* Vertical Masonry */
  --leaf-height: 480px;
  --scroll-width: 20px;
  /* Horizontal Masonry */
  /* Split Screen: 930px ... Thirds: 570px or 600px (main ext monitor) */
  --leaf-width: 600px;
  --leaf-height-child: 700px;
}

div.workspace-split.mod-root > div.workspace-split.mod-vertical {
    overflow: auto;
}
div.workspace-split.mod-root div.workspace-split.mod-vertical > div.workspace-leaf {
    min-width: var(--leaf-width);
}

/* Splitting sidebar individual pane horizontally */
div.workspace-split.mod-root div.workspace-split.mod-vertical > div.workspace-split.mod-horizontal {
    min-width: calc(var(--leaf-width) + 5px);
    height: calc(100% - 1px);
    overflow: auto;
}
div.workspace-split.mod-root div.workspace-split.mod-vertical > div.workspace-split.mod-horizontal::-webkit-scrollbar {
    width: var(--scroll-width);
}
div.workspace-split.mod-root div.workspace-split.mod-vertical > div.workspace-split.mod-horizontal > hr.workspace-leaf-resize-handle {
    height: calc(100% - 1px);
}
div.workspace-split.mod-root div.workspace-split.mod-vertical > div.workspace-split.mod-horizontal > div.workspace-leaf {
    min-height: var(--leaf-height-child);
}

/* Splitting to scroll main window horizontally */
div.workspace-split.mod-root > div.workspace-split.mod-horizontal {
    overflow: auto;
}
div.workspace-split.mod-root > div.workspace-split.mod-horizontal::-webkit-scrollbar {
    width: var(--scroll-width);
}
div.workspace-split.mod-root > div.workspace-split.mod-horizontal > hr.workspace-leaf-resize-handle {
    height: calc(100% - 1px);
}
div.workspace-split.mod-root > div.workspace-split.mod-horizontal > div.workspace-leaf {
    min-height: var(--leaf-height);
}

/* Horizontal Direction */
div.workspace-split.mod-root > div.workspace-split.mod-horizontal > div.workspace-split.mod-vertical {
    overflow: auto;
}

/* Masonry within Masonry (inception) */
div.workspace-split.mod-root > div.workspace-split.mod-vertical > div.workspace-split.mod-vertical {
    overflow: auto;
    min-width: var(--leaf-width);
    border: 2px solid;
    border-color: var(--interactive-accent);
}
div.workspace-split.mod-root > div.workspace-split.mod-vertical > div.workspace-split.mod-vertical > hr.workspace-leaf-resize-handle {
    display: none;
}

Discord post: https://discordapp.com/channels/686053708261228577/702656734631821413/895496623604510790

If any of you were familiar with Masonry Mode in Roam, it is something that a few of us have been dying for in Obsidian. I have been procrastinating looking into building it until tonight. And well, 20 minutes later, I have a working prototype!!

---

SETUP INSTRUCTIONS

Here is a screen recording showing you how to get the Masonry panes setup to start. I recommend once you get it setup to save it as a Workspace and call it "Masonry" (or whatever you want).

To start setup, close all panes except for one single pane. And then follow the video (super simple).

Add the CSS in this gist to your CSS snippet that you turn on... yes that freakin simple!

*Note: You can change the min-width (600

px by default) to whatever you would like your sidebar masonry windows to be sized as. I have NOT experimented yet with making those windows dynamically resizable (but I will)

Setup Guide: https://user-images.githubusercontent.com/64155612/136311017-f06a4b7b-f098-4dea-839a-1dfe04e596f5.mp4

DEMO: https://user-images.githubusercontent.com/64155612/136311044-e4c75102-e6cc-4481-96c0-cc36f1024120.mp4

Instructions for adding the masonry.css snippet file to Obsidian:

For creating/adding the masonry.css snippet do the following (see screenshot):

1. Open Settings in Obsidian
2. Go to Appearance tab
3. Click the folder icon button for CSS Snippets
4. The snippets folder opens up on your computer. Create a file in that folder and call it masonry.css
5. Copy the CSS code into your new masonry.css file from the github gist link: https://gist.github.com/GitMurf/a752faea05dcb4df1eb686245e253b8b
6. Click the refresh button in Obsidian Settings > Appearance > Next to the folder icon you clicked in step 3 above
7. masonry.css should now show up in the list. Click the toggle to enable it.
8. Follow this setup video to get the panes setup to start: https://user-images.githubusercontent.com/64155612/136311017-f06a4b7b-f098-4dea-839a-1dfe04e596f5.mp4

Gitmuf, I want to thank you for this snippet, it fits perfectly my work set up and has improved my workflow. I have a question, do you know how to change the leaf size manually by grabbing the handle? It always resizes to the same position, this doesn't happen with the main window, I tried to modify the CSS but I was unsuccessful.