Как адаптивно добавлять изображения бок о бок в Markdown Mdxjs на сайте Gatsby?

Question

Я хочу размещать изображения рядом друг с другом, используя Markdown Mdxjs (для сайта Gatsby).

Таблицы у меня не работали, потому что:

• необходимо добавить заголовки к столбцам (я просто хочу отображать изображения, а не текст).
• он не реагирует на мобильные устройства (если изображения слишком большие, они должны отображаться в следующей строке)
• размер изображения не может быть изменен

Answer 1

Вы можете передать объект настраиваемых компонентов реакции вашему MDXProvider, а затем используйте их в файле многомерных выражений.

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>