如何用Grid实现可横竖展开的响应式卡片列表？求解决方案

改进Grid布局（推荐） #

你的核心问题是Grid的列宽限制了卡片展开，调整Grid配置并结合卡片的网格跨度属性就能解决：

1. 修改Organizer的Grid样式
   把固定的最大列宽改成自适应的1fr，让每列在基础310px的前提下自动分配空间：

export const Organizer = styled.div`
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 16px; /* 合并column-gap和row-gap，更简洁 */
`;

2. 给MaterialCard添加网格跨度控制
   用styled-components的props来控制展开状态下的卡片占两列，同时去掉max-width限制，让卡片填充网格空间：

// 重构CustomContainer，添加isExpanded props
const CustomContainer = styled.div<{ isExpanded: boolean }>`
  cursor: pointer;
  /* 基础样式 */
  padding: 16px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  /* 展开状态样式 */
  ${props => props.isExpanded && `
    grid-column: span 2; /* 占两列 */
  `}
`;

// 修改MaterialCard组件
export const MaterialCard: React.FC<IMaterialCard> = ({ material }) => {
  const [isExpanded, setIsExpanded] = useState<boolean>(false)

  return (
    <CustomContainer 
      isExpanded={isExpanded}
      onClick={() => setIsExpanded(!isExpanded)}
    >
      {/* 卡片头部内容 */}
      <h3>{material.title}</h3>
      {/* 展开时显示的内容 */}
      {isExpanded && (
        <div className="expanded-content">
          <p>{material.description}</p>
          {/* 更多内容 */}
        </div>
      )}
    </CustomContainer>
  )
}

这种方案下，卡片展开时会自动占据两列网格，响应式场景下（比如屏幕宽度不足两列），展开的卡片会占满整行，完全符合预期效果。

替代方案：Flex布局 #

如果不想用Grid，Flex布局也能快速实现：

1. 修改Organizer的Flex样式

export const Organizer = styled.div`
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
`;

2. 控制卡片宽度
   通过isExpanded状态切换卡片宽度，展开时宽度设为两个卡片加间距的总和：

const CustomContainer = styled.div<{ isExpanded: boolean }>`
  cursor: pointer;
  flex-shrink: 0; /* 防止卡片被压缩 */
  width: ${props => props.isExpanded ? 'calc(2*310px + 16px)' : '310px'};
  /* 基础样式和Grid方案一致 */
  padding: 16px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
`;

Flex方案更简单直接，适合这种列表式的展开场景，响应式下同样会自动适配屏幕宽度。

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