Images in grid non-obstructive width using css class (img-flex)

What is this?

By adding a css class to the frontmatter one can apply a css grid to their note using flex.
We’ll be using a css snippet to do this which you can find here:

img-flex.css (212 Bytes)



I made different css classes for different settings being:
Add one of the following classes to the frontmatter (top of your note) to make this work:

cssclass: img-flex
  • img-flex : no width is set, meaning you can use your own custom width. Supports the plugin “Mousewheel Image Zoom”.

Lazy options:

  • img-flex-l : Large images grid view
  • img-flex-m : Medium images grid view
  • img-flex-s : Small images grid view

Extra: Add an enter between your images to seperate them to get bigger pictures when using one of the lazy options. Example:

1 Like