如何用CSS Grid与Tailwind动态重计算嵌套网格新行高度

问题描述 #

我使用CSS Grid来对齐内容，需要同行文本水平对齐，但第二行的header高度与上一行保持一致，导致header3、description3和footer3出现不必要的多余空白。请问是否有办法动态刷新/重计算该行的高度？

原代码 #

import "./tailwind.css";

const items = [
  {
    header:
      "I am a very large header one I am a very large header one I am a very large header one",
    description: "This is a very large description for the header number one",
    footer: "footer one"
  },
  {
    header: "I am a  header 2",
    description: "This is description 2",
    footer: "footer 2"
  },
  {
    header: "header 3",
    description: "Description 3",
    footer: "footer 3"
  }
];
export default function App() {
  return (
    <div className="m-12 grid grid-cols-2 grid-rows-2 gap-4">
      {items.map((item, index) => {
        return (
          <div className="grid grid-rows-3 border-black border-4" key={index}>
            <p className="border-2">{item.header}</p>
            <p className="border-2">{item.description}</p>
            <p>{item.footer}</p>
          </div>
        );
      })}
    </div>
  );
}

解决方案 #

方案1：拆分卡片结构，按内容类型布局 #

把header、description、footer分别作为外层Grid的独立行，这样每行高度由该行最高内容决定，不同行之间互不影响，同时保持同行文本对齐。

修改后的代码：

import "./tailwind.css";

const items = [
  {
    header: "I am a very large header one I am a very large header one I am a very large header one",
    description: "This is a very large description for the header number one",
    footer: "footer one"
  },
  {
    header: "I am a header 2",
    description: "This is description 2",
    footer: "footer 2"
  },
  {
    header: "header 3",
    description: "Description 3",
    footer: "footer 3"
  }
];

export default function App() {
  return (
    <div className="m-12 grid grid-cols-2 gap-4">
      {/* Header 行 */}
      <div className="border-black border-4 border-b-0">
        <p className="border-2">{items[0].header}</p>
      </div>
      <div className="border-black border-4 border-b-0">
        <p className="border-2">{items[1].header}</p>
      </div>
      {/* Description 行 */}
      <div className="border-black border-4 border-y-0">
        <p className="border-2">{items[0].description}</p>
      </div>
      <div className="border-black border-4 border-y-0">
        <p className="border-2">{items[1].description}</p>
      </div>
      {/* Footer 行 */}
      <div className="border-black border-4 border-t-0">
        <p>{items[0].footer}</p>
      </div>
      <div className="border-black border-4 border-t-0">
        <p>{items[1].footer}</p>
      </div>
      {/* 第三项占整行，内部保持三行结构 */}
      <div className="grid grid-cols-3 border-black border-4 col-span-2">
        <p className="border-2">{items[2].header}</p>
        <p className="border-2">{items[2].description}</p>
        <p>{items[2].footer}</p>
      </div>
    </div>
  );
}

方案2：使用CSS Subgrid（现代浏览器支持） #

Subgrid允许内层Grid继承外层Grid的轨道定义，但行高可以自适应自身内容，完美解决对齐+自适应的需求。

1. 先自定义Tailwind工具类（因为默认不包含subgrid）：

@layer utilities {
  .grid-rows-subgrid {
    grid-template-rows: subgrid;
  }
}

2. 修改组件代码：

import "./tailwind.css";

const items = [
  {
    header:
      "I am a very large header one I am a very large header one I am a very large header one",
    description: "This is a very large description for the header number one",
    footer: "footer one"
  },
  {
    header: "I am a  header 2",
    description: "This is description 2",
    footer: "footer 2"
  },
  {
    header: "header 3",
    description: "Description 3",
    footer: "footer 3"
  }
];
export default function App() {
  return (
    {/* 外层Grid移除固定rows定义，让行高自动生成 */}
    <div className="m-12 grid grid-cols-2 gap-4">
      {items.map((item, index) => {
        return (
          {/* 内层Grid使用subgrid继承外层行轨道，同时行高自适应 */}
          <div className="grid grid-rows-subgrid border-black border-4" key={index}>
            <p className="border-2">{item.header}</p>
            <p className="border-2">{item.description}</p>
            <p>{item.footer}</p>
          </div>
        );
      })}
    </div>
  );
}

问题根源 #

你原来的写法中，外层Grid强制定义了grid-rows-2，导致两行高度被固定为最高内容的高度，内层Grid的三行只能填充这个固定高度，从而产生空白。通过拆分布局或使用Subgrid，就能让行高随内容动态调整，同时保持同行文本的水平对齐。

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