无需subgrid和重复硬编码值，能否实现指定CSS网格布局？

需求概述 #

• "Title Text"、"More Options"和"Search"区域固定在屏幕顶部，不随滚动移动
• "Title Text"与"Search"垂直对齐，二者所在容器高度为53px
• 固定头部下方为两栏正常滚动的内容流

当前实现方案 #

网格布局代码 #

grid-template:
    ". header-main  header-right  ." 53px
    ". header-main  content-right ." auto
    ". content-main content-right ." auto
    / 0.5fr 1fr 1fr 0.5fr;

DOM结构与对齐处理 #

• "Title Text"和多个"More Options"被分组在header-main网格区域的容器中：

<div class="HeaderMain">
    <div class="Wrapper">
      <h2>Title text</h2>
    </div>
    <div>More Options</div>
    <div>More Options</div>
    <div>More Options</div>
    <div>More Options</div>
    <div>More Options</div>
    <div>More Options</div>
</div>

• "Search"单独放在header-right网格区域的容器中
• 给header-right和header-main添加sticky属性实现顶部固定
• 为了让"Title Text"和"Search"垂直对齐，给包裹"Title Text"的Wrapper设置height: 53px，同时Wrapper和HeaderRight均通过display: flex; align-items: center;实现垂直居中

现有痛点 #

当前方案可满足需求，但硬编码的53px重复出现了两次：一次用于定义网格第一行的高度，一次用于设置Wrapper的高度。虽然可以通过CSS变量统一管理该值，但希望找到更简洁的原生CSS实现方式。曾尝试用subgrid解决（仅Firefox支持），能实现只写一次53px，但兼容性不足。

提问 #

是否存在无需依赖subgrid、也不用重复硬编码高度值的实现方式？

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