React中如何锚定两列使条目始终对齐？宝可梦统计页布局问题

我正在开发一个宝可梦信息汇总的React练手项目，用户可通过搜索框输入宝可梦名称，点击按钮后从PokeAPI获取对应数据。项目已部署在Heroku，代码托管在GitHub。

目前底部展示的6项宝可梦属性（HP、攻击等）采用左右两列布局：左列是属性名，右列是对应数值。但在小屏幕下，“Special Attack”“Special Defense”这类长属性名换行时，对应数值无法锚定，导致布局错乱、数值上移。

为避免硬编码属性值，我用map方法动态渲染属性名和数值，代码如下：

function genStatNames(poke_stats) {
  const arrayItems = poke_stats.map((stat) => <h3 className={stat.stat.name}>{stat.stat.name.toUpperCase().replace("-", " ")}:</h3>);
  return arrayItems;
}

function genStats(poke_stats) {
  const arrayItems = poke_stats.map((stat) => <h3>{stat.base_stat}</h3>);
  return arrayItems;
}

<div className="StatSection">
    <div className="row">
        <div className="column">
            <div className="column1">
                <ul>{genStatNames(pokemon.stats)}</ul>
            </div>
        </div>
        <div className="column">
            <div className="column2">
                <ul>{genStats(pokemon.stats)}</ul>
            </div>
        </div>
    </div>
</div>

我不想手动创建6个行对象，希望保留现有动态渲染方式的同时，实现两列条目锚定对齐。

方案1：CSS Grid 实现精准对齐 #

无需修改核心动态渲染逻辑，仅通过CSS Grid布局让左右两列的对应条目强制对齐：

第一步：调整CSS样式

.StatSection .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* 重置列表样式，让每个列表项成为Grid行单元 */
.column1 ul, .column2 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-rows: repeat(6, auto);
  gap: 0.5rem;
}

/* 确保文本垂直居中，避免换行后偏移 */
.column1 ul li, .column2 ul li {
  display: flex;
  align-items: center;
}

/* 小屏幕适配 */
@media (max-width: 600px) {
  .column1 ul li h3 {
    margin: 0;
    line-height: 1.4;
  }
}

第二步：补全HTML结构（仅给h3包裹li，不改变map逻辑）

修改两个生成函数，给每个动态生成的<h3>加上<li>标签（符合HTML规范，同时让Grid布局能识别每个条目）：

function genStatNames(poke_stats) {
  const arrayItems = poke_stats.map((stat) => (
    <li key={stat.stat.name}>
      <h3 className={stat.stat.name}>{stat.stat.name.toUpperCase().replace("-", " ")}:</h3>
    </li>
  ));
  return arrayItems;
}

function genStats(poke_stats) {
  const arrayItems = poke_stats.map((stat) => (
    <li key={stat.stat.name}>
      <h3>{stat.base_stat}</h3>
    </li>
  ));
  return arrayItems;
}

方案2：Flexbox 实现等高对齐 #

如果更习惯Flex布局，也可以通过以下样式实现相同效果：

.StatSection .row {
  display: flex;
  gap: 1rem;
}

.column1 ul, .column2 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 让每个列表项平分高度，强制左右条目对齐 */
.column1 ul li, .column2 ul li {
  flex: 1;
  display: flex;
  align-items: center;
}

@media (max-width: 600px) {
  .column1 ul li h3 {
    margin: 0;
    line-height: 1.4;
  }
}

同样需要给h3包裹li标签，确保Flex布局能识别每个条目单元。

问题根源说明 #

之前的布局错乱是因为左右两个列表的条目高度完全由自身内容决定，长文本换行后左列条目高度增加，但右列对应条目高度未同步。通过Grid或Flex让两个列表的条目强制对应等高，就能彻底解决锚定对齐问题，同时保留动态渲染的灵活性。

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