使用CSS Grid交替排列多行 实现标题与对应数据上下配对布局

CSS Grid中如果指定gridRow: "title"，浏览器默认只会匹配第一个带title命名的行，不会自动跳转至后续同名空行，这是标准行为，就是你现在所有标题堆在第一行、数据堆在第二行的原因。

实现方案 #

1. 固定列数实现（可随意调整列数参数） #

直接去掉命名行配置，通过子元素行位置控制结合grid-auto-flow: dense自动填充空缺即可，以3列为例代码如下：

const items = new Array(6)
  .fill(undefined)
  .map((e, i) => ({ title: "test", data: "data-" + i }));

const root = (
  <div
    style={{
      display: "grid",
      // 调整这里的数字即可修改列数，要10列就改成repeat(10, auto)
      gridTemplateColumns: "repeat(3, auto)",
      gridAutoFlow: "dense",
      // 每组两行自动撑开高度
      gridAutoRows: "auto auto"
    }}
  >
    {items.map((item, i) => (
      <React.Fragment key={i}>
        {/* 标题固定占每组第一行 */}
        <div style={{ gridRowStart: 1 }}>{item.title}</div>
        {/* 数据固定占每组第二行 */}
        <div style={{ gridRowStart: 2 }}>{item.data}</div>
      </React.Fragment>
    ))}
  </div>
);

ReactDOM.render(root, document.getElementById("root"));

2. 响应式自动适配列数 #

如果需要根据容器可用宽度自动调整列数，只需要修改gridTemplateColumns配置，设置每个单元格的最小宽度即可，示例如下：

/* 每个单元格最小宽度120px，宽度足够时自动填充最大列数 */
gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))"

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