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;
}

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.