如何在React中实现每行仅显示3个子元素的响应式包装组件

你可以通过CSS Grid结合媒体查询实现这个需求，核心是让大屏下固定3列且列宽由内容决定，小屏自动适配列数并换行。以下是具体实现：

1. 创建React包装组件 #

import './ResponsiveGridWrapper.css';

const ResponsiveGridWrapper = ({ children }) => {
  return <div className="responsive-grid-wrapper">{children}</div>;
};

export default ResponsiveGridWrapper;

2. 编写响应式CSS #

.responsive-grid-wrapper {
  display: grid;
  /* 元素间的间距，按需调整 */
  gap: 1rem;
  /* 小屏自动适配列数，列宽随内容变化 */
  grid-template-columns: repeat(auto-fit, minmax(min-content, auto));
  /* 元素左对齐，避免被单元格拉伸 */
  justify-items: start;
}

/* 大屏断点（示例为1024px，可根据需求修改） */
@media (min-width: 1024px) {
  .responsive-grid-wrapper {
    /* 固定3列，列宽由内容决定 */
    grid-template-columns: repeat(3, auto);
    /* 可选：让整个网格在容器内左对齐，若要居中可改为justify-content: center */
    justify-content: start;
  }
}

3. 组件使用示例 #

import ResponsiveGridWrapper from './ResponsiveGridWrapper';

const App = () => {
  return (
    <ResponsiveGridWrapper>
      <div><input type="text" placeholder="输入框1" /></div>
      <div><input type="checkbox" id="cb1" /><label htmlFor="cb1">复选框1</label></div>
      <div><input type="text" placeholder="输入框2" /></div>
      <div><input type="checkbox" id="cb2" /><label htmlFor="cb2">复选框2</label></div>
      <div><input type="text" placeholder="输入框3" /></div>
    </ResponsiveGridWrapper>
  );
};

export default App;

关键属性说明 #

• repeat(3, auto)：大屏下强制渲染3列，auto确保列宽由子元素内容决定，避免单元格无意义拉伸，实现紧密排列的效果。
• gap：统一控制元素间的水平、垂直间距，避免布局拥挤。
• justify-items: start：让子元素在单元格内左对齐，防止元素被强制填满单元格宽度。
• repeat(auto-fit, minmax(min-content, auto))：小屏时自动根据容器宽度计算可容纳的列数，最小列宽为内容本身宽度，确保元素不会被挤压变形，超出宽度自动换行。

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