CSS Grid-template-rows支持小数fr单位吗？rem/em与fr适配咨询

我正参照Figma文件使用CSS Grid进行内容布局，要求使用分数单位fr替代rem/em设置grid-template-columns和grid-template-rows，现存在以下疑问：

1. grid-template-rows是否支持带小数的fr单位？ #

支持。fr是网格容器剩余空间的比例分配单位，小数只是比例的精确表达，浏览器完全兼容这种写法，比如你代码里的1.72fr是完全有效的，只要数值为正即可。

2. 能否将rem/em单位转换为fr单位？ #

不能直接转换，因为两者的本质完全不同：

• rem/em是相对长度单位，基于根元素（rem）或父元素（em）的字体大小计算出固定的像素值；
• fr是比例分配单位，基于网格容器的剩余空间按比例分配。

如果要在网格中实现类似rem的固定尺寸效果，可以结合混合单位使用，比如：

grid-template-rows: 20rem 1fr; /* 第一行固定20rem高度，第二行分配剩余空间 */
grid-template-rows: minmax(20rem, 1fr); /* 行高最小20rem，超出部分按比例分配 */

但这不是“转换”，而是两种单位的配合使用。

3. 使用rem/em替代fr单位的优劣如何？ #

优势

• 尺寸精确：rem/em是长度单位，能直接对应Figma设计稿的固定尺寸，布局还原度更高；
• 可控性强：配合媒体查询调整根字体大小，能批量修改网格的行/列尺寸，适合需要统一缩放的响应式场景。

劣势

• 缺乏弹性：网格容器大小变化时，rem/em定义的行/列不会自动分配剩余空间，无法实现fr那种“自适应填充”的效果；
• 维护成本高：如果布局需要适配多种容器尺寸，需要编写大量媒体查询调整rem/em值，而fr能自动适配。

关于grid-template-columns: auto auto的使用 #

auto值会让列宽根据内容的实际宽度自动调整，适合内容长度不确定的场景，但存在以下问题：

• 布局稳定性差：内容长度变化会导致列宽突变，很难和Figma的精确布局匹配；
• 空间利用率低：如果容器有剩余空间，auto列不会主动填充，造成空间浪费。

如果你的ZX9模块需要固定比例的列宽，还是用fr更符合需求；如果内容是动态生成的，auto能自适应，但要做好内容溢出的处理（比如overflow: hidden或text-overflow: ellipsis）。

相关代码 #

HTML代码

<section class="advertised">
    <div class="zx9-display">
      <!-- <img src="/audiophile/assets/home/desktop/image-speaker-zx9.png" class="speaker-photo" alt="zx9 speaker" /> -->
      <div class="zx9-content">
        <h2 class="ad-title">ZX9 SPEAKER</h2>
        <p class="ad-content">Upgrade to premium speakers that are phenomenally built to deliver truly remarkable sound.</p>
        <button class="zx9-btn">SEE PRODUCT</button>
      </div>
    </div>
    <div class="zx7-display">
      <div class="zx7-content">
        <h2 class="zx7-title">ZX7 SPEAKER</h2>
        <button class="product-btn"><a href="/zx7-speaker.html">SEE PRODUCT</a></button>
      </div>
    </div>
    <div class="yx1-display">
      <div class="yx1-earphones">
        <img src="/audiophile/assets/home/desktop/image-earphones-yx1.jpg" class="earphone-photo" alt="yx1 earphones" />
      </div>
      <div class="yx1-content">
        <h2 class="yx1-title">YX1 EARPHONES</h2>
        <button class="product-btn"><a href="/yx1.html">SEE PRODUCT</a></button>
      </div>
    </div>
  </section>

CSS代码

.advertised {
  display: grid;
  grid-template-rows: 1.72fr 1fr 1fr;
  row-gap: 10rem;
}

/* zx9 graphic display ad */

.zx9-display{
  display: grid;
  grid-template-columns: 3fr 1.9fr;
  align-items: center;
  position: relative;
  border-radius: 0.5rem;
  background-color: #D87D4A
}

.zx9-content {
  grid-column: 2;
  display: grid;
  max-width: 21.8125rem;
  max-height: 18.9375rem;
}

.ad-title {
  margin-bottom: 1.5rem;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 3.625rem;
  letter-spacing: 0.125rem;
  color: #fff;
}

.ad-content {
  font-size: 0.9375rem;
  line-height: 1.5625rem;
  color: #fff;
  opacity: 0.75;
  margin-bottom: 2.5rem;
}

.zx9-btn {
  width: 10rem;
  height: 3rem;
  border: none;
  background-color: #000;
  color: #fff;
}

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