如何将CSS Grid自动扩展行的"手风琴"行为适配到列方向？

Michelle Barker撰写了《Solving a Tricky Layout Problem with CSS Grid》一文，她的代码在垂直方向表现出色，但我尝试将其适配到水平方向时遇到了困难。

上下对齐的版本在视口变窄、文本内容增加或调整font-size等情况下，文本对应的grid-row能够正常缩放；但左右对齐的版本在调整视口、文本内容或font-size时，出现了异常布局（具体表现可参考对比截图）。

* {
  box-sizing: border-box;
}

.grid {
  border: 2px dashed;
  margin: 40px 0;
}

.grid__media {
  background: darkgray;
  font: 2em monospace;
  alignment-baseline: middle;
  text-anchor: middle;
}

.grid__text {
  background: rgba(95, 158, 160, 0.7);
}

:root {
  --static-areas: repeat(8, minmax(0, 1fr));
  --autoexpanding-areas: [text-start] 1fr [media-start] auto [text-end] 40px [heading-start] auto [heading-end] 40px auto [media-end];
  --reversed-autoexpanding-areas: [media-start] auto 40px [heading-start] auto [heading-end] 40px [text-start] auto [media-end] 1fr [text-end];
}

.grid {
  display: grid;
  grid-template-rows: var(--autoexpanding-areas);
  grid-template-columns: var(--static-areas);
}

.grid__media {
  grid-row: media;
  grid-column: 1/-1;
  max-width: 100%;
}

.grid__text {
  grid-row: text;
  grid-column: span 4/-1;
  align-self: start;
}

.grid--text-bottom {
  grid-template-rows: var(--reversed-autoexpanding-areas);
}

.grid--text-bottom>.grid__text {
  grid-column: 1/span 4;
  align-self: end;
}

.grid--text-left,
.grid--text-right {
  grid-template-rows: var(--static-areas);
  grid-template-columns: var(--autoexpanding-areas);
}

.grid--text-left>.grid__media,
.grid--text-right>.grid__media {
  grid-row: 1/-1;
  grid-column: media;
}

.grid--text-left>.grid__text,
.grid--text-right>.grid__text {
  grid-row: span 4/-1;
  grid-column: text;
  align-self: end;
}

.grid--text-right {
  grid-template-columns: var(--reversed-autoexpanding-areas);
}

.grid--text-right>.grid__text {
  grid-row: 1/span 4;
}

<div class="grid">
  <svg class="grid__media"><text x="50%" y="50%">top text</text></svg>
  <div class="grid__text" lang="la">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>

<div class="grid grid--text-bottom">
  <svg class="grid__media"><text x="50%" y="50%">bottom text</text></svg>
  <div class="grid__text" lang="la">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus metus, venenatis egestas diam tempus, venenatis ornare sem. Duis maximus erat eget dui aliquet tempor id nec arcu.</div>
</div>

<div class="grid grid--text-left">
  <svg class="grid__media"><text x="50%" y="50%">left text</text></svg>
  <div class="grid__text" lang="la">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>

<div class="grid grid--text-right">
  <svg class="grid__media"><text x="50%" y="50%">right text</text></svg>
  <div class="grid__text" lang="la">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus metus, venenatis egestas diam tempus, venenatis ornare sem. Duis maximus erat eget dui aliquet tempor id nec arcu.</div>
</div>

这是CSS块级轴与内联轴之间的已知差异吗？还是我遗漏了某些基础概念？

需求背景 #

我希望实现漫画文本气泡/文本内容覆盖在漫画作品上的自适应布局，让网络漫画具备网页的固有灵活性，以满足以下场景需求：

• 翻译：浏览器自动翻译、谷歌翻译、必应翻译等；
• 无障碍：浏览器/系统文本设置、页面缩放、字体替换等；
• 响应式：媒体查询变化、基于视口的font-size调整等。

设计思路是通过CSS Grid重叠让文本初始处于理想位置和尺寸，当字体大小变化、文本被翻译等情况发生时，文本向特定的"安全"方向（比如页边空白区域）扩展；若文本扩展至足够程度，面板周围的空白/边距等间距应随之扩大，避免文本重叠遮挡其他面板/内容，同时尽可能避免出现横向滚动条。

我已尝试过以下方法，但均未达到预期效果：

• SVG <text>（不支持自动换行和重排）；
• 使用SVG结合<foreignObject>切换回HTML+CSS（谷歌翻译、必应翻译及浏览器内置翻译均无法识别其中内容）；
• ComicA11y的JavaScript实现方案（依赖JS且存在缺陷，例如翻译为德语并增大字体时表现不佳）；
• CSS Shapes（仅通过shape-outside的hack实现过于脆弱，需要shape-inside才能具备鲁棒性）；
• 带负边距的Flexbox（无法准确控制各部分尺寸变化逻辑）。

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