React Grid布局数组映射：如何将属性对应到对应列分类展示

我正在映射一个数组，希望将每个映射项的各个属性展示在对应的列分类下——name置于Item Name下方，quantity置于QTY.下方等。但目前每个完整的item都显示在Item Name列下方，请问如何正确实现每个属性对应到其列分类下展示？

import { ReactElement } from "react";
import styled from "styled-components";
import { Invoice } from "../../../Root/Root.utils";

type Props = {
  invoice?: Invoice;
};

export const SummaryPart = ({ invoice }: Props): ReactElement => {
  return (
    <Summary>
      <Items>
        <p>Item Name</p>
        <p>QTY.</p>
        <p>Price</p>
        <p>Total</p>
        {invoice?.items.map((item) => (
          <Item>
            <h3>{item.name}</h3>
            <span>{item.quantity}</span>
            <span>{item.price}</span>
            <span>{item.total}</span>
          </Item>
        ))}
      </Items>
    </Summary>
  );
};

const Summary = styled.div`
  width: 100%;
  border-radius: 8px;
  background-color: rgba(249, 250, 254, 1);
  padding: 2rem;
`;

const Items = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
`;

const Item = styled.div``;

问题出在Item组件没有和父容器的Grid布局对齐，内部元素默认垂直堆叠，导致整个item挤在第一列。只需给Item添加Grid布局，让它的内部元素按四列排列即可：

修改后的代码：

import { ReactElement } from "react";
import styled from "styled-components";
import { Invoice } from "../../../Root/Root.utils";

type Props = {
  invoice?: Invoice;
};

export const SummaryPart = ({ invoice }: Props): ReactElement => {
  return (
    <Summary>
      <Items>
        <p>Item Name</p>
        <p>QTY.</p>
        <p>Price</p>
        <p>Total</p>
        {invoice?.items.map((item) => (
          <Item key={item.id}> {/* 添加唯一key，避免React警告 */}
            <h3>{item.name}</h3>
            <span>{item.quantity}</span>
            <span>{item.price}</span>
            <span>{item.total}</span>
          </Item>
        ))}
      </Items>
    </Summary>
  );
};

const Summary = styled.div`
  width: 100%;
  border-radius: 8px;
  background-color: rgba(249, 250, 254, 1);
  padding: 2rem;
`;

const Items = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem; {/* 可选：添加列间距优化视觉效果 */}
`;

const Item = styled.div`
  display: grid;
  grid-template-columns: inherit; {/* 继承父容器的4列布局 */}
  align-items: center; {/* 可选：让内容垂直居中 */}
`;

说明 #

1. 给Item设置display: grid和grid-template-columns: inherit，让内部的四个属性元素分别对应到父容器的四列，和表头完全对齐。
2. 为映射的Item添加key属性，符合React列表渲染规范，避免控制台警告。
3. 可选添加gap和align-items属性，优化表格的视觉对齐效果。

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