如何在Gatsby站点中用Markdown MDXjs实现响应式图片并排？

Got it, tables are clearly not the right fit here—your three pain points are totally valid. Let’s build a flexible, responsive solution that lets you display images side-by-side without any extra fluff, and adapts perfectly to mobile screens.

Option 1: Reusable Custom Component (Recommended) #

Creating a dedicated component makes this pattern easy to reuse across your MDX files, and gives you full control over styling.

Step 1: Create the ImageGrid Component #

In your Gatsby project, add a new component at src/components/ImageGrid.js:

import React from 'react';
// Use Emotion, CSS Modules, or plain CSS—adjust based on your setup
import { css } from '@emotion/react';

const gridContainer = css`
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem; /* Space between images */
  margin: 2rem 0;
`;

const imageWrapper = css`
  /* Default to 2 columns on desktop */
  flex: 1 1 calc(50% - 0.625rem);
  /* Force wrap on mobile when image would be smaller than 280px */
  min-width: 280px;

  img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Optional: keeps images cropped to consistent aspect ratio */
    border-radius: 6px; /* Optional: soft corners for aesthetics */
  }
`;

export default function ImageGrid({ children }) {
  return (
    <div css={gridContainer}>
      {React.Children.map(children, (child) => (
        <div css={imageWrapper}>{child}</div>
      ))}
    </div>
  );
}

Step 2: Use the Component in Your MDX File #

Import the component and wrap your images with it:

import ImageGrid from '../components/ImageGrid';

<ImageGrid>
  ![Sunset over mountains](/images/sunset.jpg)
  ![Lake with pine trees](/images/lake.jpg)
  ![Autumn forest path](/images/forest.jpg)
</ImageGrid>

Option 2: Inline Style Quick Fix (For One-Off Uses) #

If you only need this pattern once, you can skip the component and use inline styles directly in your MDX:

<div style={{ 
  display: 'flex', 
  flexWrap: 'wrap', 
  gap: '1rem', 
  margin: '1.5rem 0'
}}>
  <div style={{ flex: '1 1 calc(50% - 0.5rem)', minWidth: '250px' }}>
    ![Coastal cliff](/images/cliff.jpg)
  </div>
  <div style={{ flex: '1 1 calc(50% - 0.5rem)', minWidth: '250px' }}>
    ![Ocean waves](/images/waves.jpg)
  </div>
</div>

Why This Works for Your Needs #

• No required text/headers: The component only renders your images—no extra markup forced on you.
• Full mobile responsiveness: The flex-wrap: wrap and min-width properties ensure images automatically stack vertically when the screen gets too small.
• Easy size adjustments: Tweak the flex value to change column count (e.g., calc(33.33% - 0.83rem) for 3 columns), or adjust min-width to control when wrapping happens. You can also modify the img styles to set fixed heights or max widths.

Bonus: Optimize with Gatsby Image #

If you’re using gatsby-plugin-image (highly recommended for performance), swap out the markdown images for StaticImage or GatsbyImage in the component:

import ImageGrid from '../components/ImageGrid';
import { StaticImage } from 'gatsby-plugin-image';

<ImageGrid>
  <StaticImage src="../images/sunset.jpg" alt="Sunset over mountains" />
  <StaticImage src="../images/lake.jpg" alt="Lake with pine trees" />
</ImageGrid>

This will automatically generate optimized, responsive image versions for different screen sizes.

内容的提问来源于stack exchange，提问作者Mostafa