Image grids are a simple way to arrange images in columns. This feature is compatible with Block width options for image widths.
Image grids can be activated globally using Minimal Theme Settings and Hotkeys, or on a per-file basis using the Helper classes.
Image grids are easy to use, and don't rely on any special syntax. All you do is add an extra line break between images to create a row, and columns take care of themselves
Image grids are only available in reading view. Image grids are not available in Live Preview or PDF exports. For the best user experience, it is recommended to edit image grids via source mode, rather than Live Preview.
Image grids are compatible with Minimal for Obsidian Publish, however they use a newer feature of CSS :has()
which is not available on older browsers.
Use Helper classes to control image grids on a note
Class | Description |
---|---|
img-grid |
Sets image layout to grid mode |
img-100 |
Image blocks fill 100% of the pane width |
img-max |
Image blocks fill the max line width |
img-wide |
Image blocks fill the wide line width |
Additional options can be accessed via Style Settings plugin, under Images:
Image grid crop either Crop to fit which fills the dimensions of each grid cell, or Show full image which turns off cropping and scales down the image to fit fully inside the grid cell.
Image grid background can be set to a color, which is useful if you want to retain the masonry look when cropping is turned off.