Add more meaning and visual interest to your markdown documents by grouping sets of images, videos, or even audio tracks into grid layouts in Obsidian.

  • By Zac Remboldt
  • Last update: Dec 19, 2022
  • Comments: 3

Media Grid

An Obsidian snippet

Skip to installation instructions


This is a generic snippet that I intended for use with any Obsidian theme. The idea was heavily inspired by Stephan Ango's Minimal theme which incorporates this same kind of grid functionality. You can find him @kepano on Twitter or buy him a coffee 👇 to show your support.


Media Grid gives you more control over the way your linked content is rendered in Obsidian. Add more meaning and visual interest to your documents by grouping sets of images, videos, or even audio tracks into grid layouts.

Creating a new grid is as easy as placing two or more image links next to each other in your markdown document. Below you can see the result of three links.

Screenshot showing a basic image layout

Want to start a new row? Just put an empty line between your links. Below you can see the result of two groups of links separated by an empty line. 😎

Screenshot showing how it works

Awesome for throwing together a quick moodboard or collecting ideas for your next project.

Screenshot showing a collection of ideas

It works with audio and video files too!

Screenshot showing audio and video layouts

Make it yours

Media Grid looks great out of the box but can be further configured to your liking through the Style Settings Plugin (not required).

Screenshot showing Media Grid settings panel


NOTE: This snippet requires the latest version of Contextual Typography.
If you already have the latest version of Contextual Typography:

  1. Download media-grid-snippet.css from this repo.
  2. Open the settings panel in Obsidian and click the Appearance tab.
  3. Scroll to "CSS snippets" and click the folder icon.
  4. Drop media-grid-snippet.css into the folder that appears.
  5. Now back in Obsidian, next to "CSS snippets", click the "Reload snippets" button.
  6. You should now see media-grid-snippet in the list. Toggle it on and you're ready to go! 🥳


If you run into any issues or have suggestions feel free to submit a GitHub issue or send me a message @zremboldt on Twitter. I'll respond as soon as I can. 👍


No pressure whatsoever but if you enjoy Media Grid and would like to support its development you can buy me a coffee. Thank you! 😄



  • 1

    Not working in 1.0

    I justs discovered and installed the css file as per instructions, but nothing is happening either in live editor or reader mode. Can anyone confirm that this works in 1.0 ?

  • 2

    Row-gap should be 7px but mine is closer to 70px

    Love your snippet! It's transformational for obsidian and I hope they include it in the core. One problem - the "Grid Gap" -- column-gap is fine at 7px, but the row-gap should be 7px but mine is closer to 70px. I've tried adjusting it but it stays the same. I've only got one line between the image links, ie: ![[walker.jpg]] ![[walker.jpg]] ![[walker.jpg]]

    ![[walker.jpg]] ![[walker.jpg]]

    Any ideas?


  • 3

    Support Live Preview Mode

    Hi, Great work on the snippet! the only thing currently missing for me is support for the new Live Preview editor, I dunno if it would be even possible but it would be nice to have