How to add images side-by-side responsively in Markdown Mdxjs in a Gatsby site?

Question

I want to put images side-by-side responsively using Markdown Mdxjs (for a Gatsby site).

Tables did not work for me, because:

• it's necessary to add titles to columns (I just want to display images, no text).
• it's not responsive for mobile (if images are too large, they should display in the next row)
• image size cannot be adapted

Answer 1

You can pass an object of custom react components to your MDXProvider, then use them in the MDX file.

import image1 from "./7.jpg"
import image2 from "./6.jpg"
import image3 from "./3.jpg"

## Big ol pupper blep

<cols num="3">
  <image-card src={image1} title="Shooberino waggy">
    Pupperino dat tungg tho floofs big ol doggorino thicc pupperino
  </image-card>
  <image-card src={image2} title="Biscit corgo">
    Maximum borkdrive floofs very jealous pupper
  </image-card>
  <image-card src={image3} title="Long bois shoob">
    What a nice floof
  </image-card>
</cols>