如何用CSS实现基于列而非行的响应式表格行对齐？

当然可以用HTML/CSS实现，推荐用CSS Grid来搞定，不需要拆分数据写混乱的代码，还能轻松处理响应式换行和文本溢出。

实现思路 #

每个对象作为独立的列容器，对象的每个属性对应一行，利用Grid的自动行列对齐特性，让所有对象的同位置属性自动对齐，同时保持每个对象的独立性。

具体代码示例 #

HTML结构（对应JSX可直接循环渲染）

<div class="object-container">
  <!-- 对象1 -->
  <div class="object-item">
    <div class="property">产品名称：笔记本电脑</div>
    <div class="property">价格：5999元</div>
    <div class="property">描述：高性能轻薄本，适合办公与创作，续航长达12小时</div>
  </div>
  <!-- 对象2 -->
  <div class="object-item">
    <div class="property">产品名称：无线鼠标</div>
    <div class="property">价格：99元</div>
    <div class="property">描述：人体工学设计，静音按键，支持多设备切换</div>
  </div>
  <!-- 更多对象... -->
</div>

CSS样式

/* 父容器：控制列的布局，自动适配换行 */
.object-container {
  display: grid;
  /* 自动生成列，最小宽度220px，超出后自动换行 */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem; /* 列之间的间距 */
  padding: 1rem;
}

/* 单个对象容器：控制属性的行布局 */
.object-item {
  display: grid;
  gap: 0.8rem; /* 属性行之间的间距 */
}

/* 属性项：控制对齐与溢出 */
.property {
  align-self: start; /* 垂直顶部对齐，可改为center/end调整对齐方式 */
  padding: 0.6rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  word-wrap: break-word; /* 文本过长自动换行 */
  line-height: 1.5;
}

方案优势 #

1. 无需拆分数据：每个对象是独立的组件，JSX里直接循环渲染对象列表即可，代码结构清晰，不用按属性维度重组数据。
2. 自动对齐：Grid会自动让所有对象的第n个属性处于同一水平行，行高由该行最高的内容决定，完美实现表格式对齐。
3. 响应式支持：auto-fit + minmax 会根据屏幕宽度自动调整列数，小屏幕自动换行。
4. 溢出处理：通过word-wrap: break-word轻松处理长文本溢出问题。

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