如何使用CSS Grid实现第二行高度与第一行（max-content高度）一致？

我明白你的需求：第一行高度完全由自身内容决定（max-content），第二行不管自身内容多少，都要和第一行保持相同高度。之前尝试的1fr 1fr或max-content 1fr之所以不行，是因为1fr会占用容器的可用剩余空间，而不是匹配第一行的内容高度。

下面给你两种可行的解决方案：

方案一：纯CSS静态内容适配（适合内容固定的场景） #

如果你的第一行内容高度是固定的（比如文字数量不会变化），可以先手动测量第一行的max-content高度，然后直接给两行设置固定高度：

.grid {
  grid-template-rows: [行高数值] [行高数值];
  /* 比如第一行max-content是80px，就写 grid-template-rows: 80px 80px; */
}

这种方法简单直接，但缺点是内容变化时需要手动调整数值。

方案二：JavaScript动态适配（适合动态内容场景） #

如果内容是动态变化的，我们可以用JS获取第一行的实际高度，然后将这个高度赋值给第二行的轨道高度。具体步骤如下：

1. 先给Grid容器设置初始的行模板，确保第一行是max-content：

.grid {
  display: grid;
  grid-template-rows: max-content auto;
}

2. 添加JS代码，监听内容变化（或页面加载完成后），动态设置第二行高度：

// 获取Grid容器和第一行元素
const grid = document.querySelector('.grid');
const firstRow = grid.querySelector(':first-child');

// 函数：同步两行高度
function syncRowHeights() {
  const firstRowHeight = firstRow.offsetHeight;
  grid.style.gridTemplateRows = `${firstRowHeight}px ${firstRowHeight}px`;
}

// 页面加载完成后执行
window.addEventListener('load', syncRowHeights);

// 如果内容是动态更新的，在内容变化后调用syncRowHeights()
// 比如监听元素内容变化、窗口 resize 等事件
window.addEventListener('resize', syncRowHeights);

这种方法可以自动适配第一行的内容高度变化，不管内容怎么变，第二行都会和第一行保持一致。

补充：为什么纯CSS难以实现？ #

CSS Grid的轨道高度计算是独立的：max-content是基于当前轨道内的内容计算的，没办法直接让第二行轨道引用第一行的max-content高度值。目前CSS还没有原生的变量可以直接捕获轨道的计算高度（虽然CSS变量可以用，但max-content是关键字，无法直接赋值给变量复用），所以动态场景下JS是更可靠的方案。

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