ruby标签不能直接作为grid item使用，因其是内联级语义标签，强制设display: grid会破坏注音语义、无障碍支持及浏览器兼容性；正确做法是用span等中性容器包裹ruby再参与Grid布局。
ruby 标签本身不能直接参与 CSS Grid 布局的轨道分配，因为它是内联级（inline）语义标签，且浏览器会强制将其渲染为内联容器；若强行设 display: grid 会破坏其注音语义和可访问性，也不被规范支持。
为什么 ruby 不能直接作为 grid item 使用
ruby 元素在 DOM 中是“内联格式化上下文”的根节点，其子元素 rb、rt、rp 有固定渲染逻辑：浏览器会自动将 rb 内容与 rt 注音对齐，rp 仅在不支持 ruby 的环境中显示括号。一旦给 ruby 设置 display: grid 或 display: block，会导致：
-
rt脱离注音上下文，失去自动对齐能力 - 屏幕阅读器可能无法识别注音关系，破坏无障碍
- 部分浏览器（如 Safari）会静默忽略
display修改，行为不一致
想让 ruby 组合体参与 Grid 布局，只能包裹一层
正确做法是用一个中性容器（如 span 或 div）包裹整个 ruby，再把这个容器设为 grid item：
<div class="grid-container"> <span class="ruby-wrapper"><ruby><rb>漢</rb><rt>かん</rt></ruby></span> <span class="ruby-wrapper"><ruby><rb>字</rb><rt>じ</rt></ruby></span> <div>普通文本块</div> </div>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 8px;
}
.ruby-wrapper {
/* 保持 ruby 原有内联行为，不干扰注音 */
}- 不要给
ruby本身设grid-column或align-self - 若需控制注音位置（如把
rt放到下方），应通过ruby-position属性，而非 Grid 轨道 - 包裹层
.ruby-wrapper可加text-align或justify-self微调整体对齐
需要多列 ruby 并排？用 repeat(auto-fit) + minmax 最稳妥
当页面有一组 ruby 注音项（如古籍逐字注音），希望它们自适应换行并填满容器宽度，推荐用隐式网格配合 minmax()：
.ruby-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 4px;
}
.ruby-grid > * {
/* 每个子项是包裹 ruby 的 span，保持语义完整 */
}-
80px是单个 ruby 组合体最小所需宽度（含文字+注音），可根据字体大小调整 - 避免用
fr单独定义列数（如1fr 1fr 1fr），否则小屏下会挤压rt导致截断 - 注音内容过长时，
rt默认会缩小字号或换行，这是浏览器原生行为，无需额外干预
真正容易被忽略的是：ruby 的语义完整性比视觉对齐优先级更高。哪怕 Grid 布局再灵活，也不能以牺牲可访问性为代价去“强行控制”rt 的位置——该由 ruby-position: under 或浏览器默认逻辑处理的，就交给它。
