React+Sass实现两列卡片组内容等高对齐需求咨询

针对你的需求，以下是两种无需固定高度的实现思路，结合React和Sass完成：

方案一：Flexbox 分组包裹（按组严格对齐） #

核心是将每两个卡片作为一组，用Flex容器包裹，利用Flex的stretch特性让组内卡片自动等高，同时卡片内部用垂直Flex布局实现模块对齐。

React 代码示例 #

import React from 'react';
import './CardGroup.scss';

// 示例卡片数据
const cardData = [
  { id: 1, title: '短标题', content: '少量内容' },
  { id: 2, title: '较长的标题文字，占了两行', content: '这里是更多的内容，会让卡片高度更高一些，测试对齐效果' },
  { id: 3, title: '普通标题', content: '普通长度的内容' },
  { id: 4, title: '超级长的标题示例，需要换行显示好几行', content: '超多内容填充，用来测试组内高度对齐，确保另一个卡片能跟这个等高，并且内部元素位置一致' },
];

// 辅助函数：将卡片两两分组
const groupCards = (cards) => {
  const groups = [];
  for (let i = 0; i < cards.length; i += 2) {
    groups.push(cards.slice(i, i + 2));
  }
  return groups;
};

const CardGroup = () => {
  const cardGroups = groupCards(cardData);

  return (
    <div className="card-container">
      {cardGroups.map((group, idx) => (
        <div key={idx} className="card-row">
          {group.map(card => (
            <div key={card.id} className="card">
              <h3 className="card-title">{card.title}</h3>
              <div className="card-content">{card.content}</div>
              <button className="card-btn">操作按钮</button>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

export default CardGroup;

Sass 样式示例 #

.card-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

// 每组卡片的Flex容器
.card-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;

  // 响应式适配：小屏幕切换为单列
  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.card {
  flex: 1; // 让两个卡片平分容器宽度
  display: flex;
  flex-direction: column; // 垂直布局卡片内部元素
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;

  .card-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
  }

  .card-content {
    flex: 1; // 自动填充剩余空间，将按钮推至底部
    margin-bottom: 16px;
    line-height: 1.5;
  }

  .card-btn {
    align-self: flex-start; // 按钮靠左对齐（可按需调整）
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #2196f3;
    color: #fff;
    cursor: pointer;
  }
}

方案二：CSS Grid 自动布局（无明确分组） #

直接用CSS Grid实现两列布局，Grid会自动让同一行的卡片高度一致，代码更简洁，适合不需要严格分组的场景。

React 代码示例 #

import React from 'react';
import './CardGrid.scss';

const cardData = [/* 同方案一的卡片数据 */];

const CardGrid = () => {
  return (
    <div className="card-grid-container">
      {cardData.map(card => (
        <div key={card.id} className="card">
          <h3 className="card-title">{card.title}</h3>
          <div className="card-content">{card.content}</div>
          <button className="card-btn">操作按钮</button>
        </div>
      ))}
    </div>
  );
};

export default CardGrid;

Sass 样式示例 #

.card-grid-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); // 两列等宽
  gap: 20px; // 卡片间距

  @media (max-width: 768px) {
    grid-template-columns: 1fr; // 小屏幕单列
  }
}

// 卡片样式同方案一，无需修改
.card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;

  .card-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
  }

  .card-content {
    flex: 1;
    margin-bottom: 16px;
    line-height: 1.5;
  }

  .card-btn {
    align-self: flex-start;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #2196f3;
    color: #fff;
    cursor: pointer;
  }
}

关键要点 #

1. 卡片内部必须用垂直Flex布局，并给内容区域设置flex: 1，确保按钮等底部元素始终对齐，不受内容长度影响。
2. 两种方案都完全不需要固定高度，所有高度由内容自动撑开，同时保证组内/行内卡片等高。
3. 响应式适配只需修改容器的布局属性即可快速切换单列/双列。

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