Tailwind CSS嵌套子网格行高不一致求助：如何实现统一行高

我正在学习使用Tailwind CSS创建Grid与Subgrid，想要实现一行包含两列，第二列包含多行文本。目前遇到的问题是行高不统一，请问在文本长度动态变化的情况下，如何让行高保持一致？

当前效果：部分条目因第二列文本长度不同，导致整体行高不一致，布局错乱。

当前代码：

<div className="w-full grid grid-cols-[auto_1fr] grid-rows-[auto_1fr_auto] gap-4">
    {
        Object.keys(Array.apply(0, Array(10))).map((el, index) => {
            const a: string = "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.";
            return <div key={index} className="grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3">
                <div className="w-96 h-96 bg-slate-950 ">Image</div>
                <div className=" bg-slate-700 ">
                    <p className="bg-yellow-100">Role</p>
                    {
                        index % 2 == 0 ? <p>{a}</p> : <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
                    }
                    <p>Year - Loc</p>
                </div>
            </div>
        })
    }
</div>

方案1：用独立Grid容器（兼容性更好） #

放弃Subgrid，把每个条目做成独立的两列Grid，文本列内部再用Grid分配行高，让中间文本区域自动填充剩余空间，固定顶部和底部元素位置：

<div className="w-full grid grid-cols-1 gap-4">
    {
        Object.keys(Array.apply(0, Array(10))).map((el, index) => {
            const a: string = "你的长文本内容...";
            return (
                <div key={index} className="grid grid-cols-[auto_1fr] gap-4">
                    <div className="w-96 h-96 bg-slate-950 self-start">Image</div>
                    <div className="grid grid-rows-[auto_1fr_auto] gap-2 bg-slate-700">
                        <p className="bg-yellow-100">Role</p>
                        {/* 长文本超出可滚动，避免撑破布局 */}
                        <div className="overflow-auto">
                            {index % 2 == 0 ? <p>{a}</p> : <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>}
                        </div>
                        <p>Year - Loc</p>
                    </div>
                </div>
            );
        })
    }
</div>

方案2：修复Subgrid用法 #

如果坚持用Subgrid，让外层Grid的行高自动适配最高条目，同时确保子项正确继承网格线：

<div className="w-full grid grid-cols-[auto_1fr] gap-4 grid-auto-rows-1fr">
    {
        Object.keys(Array.apply(0, Array(10))).map((el, index) => {
            const a: string = "你的长文本内容...";
            return (
                <div key={index} className="col-span-2 grid grid-cols-subgrid grid-rows-subgrid">
                    <div className="w-96 h-96 bg-slate-950 row-span-3">Image</div>
                    <div className="grid grid-rows-[auto_1fr_auto] gap-2 bg-slate-700">
                        <p className="bg-yellow-100">Role</p>
                        {index % 2 == 0 ? <p>{a}</p> : <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>}
                        <p>Year - Loc</p>
                    </div>
                </div>
            );
        })
    }
</div>

注意事项 #

• Subgrid需要浏览器版本支持（Chrome 117+、Firefox 71+），兼容旧浏览器优先选方案1
• 给长文本容器加overflow-auto可避免文本过长撑乱整体布局

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