能否指定文本节点流入CSS Grid布局的指定grid-area？

好问题！直接给出结论：无法直接给纯文本节点指定grid-area，但我们可以通过简单的方式解决这个需求，下面详细说明：

为什么文本节点没法直接指定grid-area？ #

CSS Grid布局中，只有网格容器的直接子元素节点才会被视为「网格项（Grid Item）」，我们可以通过选择器选中这些元素，为它们设置grid-area来指定位置。

而纯文本节点会被浏览器自动转换为匿名网格项，这类匿名元素没有对应的CSS选择器，我们无法直接通过CSS为它设置grid-area属性。

解决方案：给文本节点套一层元素（推荐） #

最直接且兼容性最好的方式，就是把文本节点包裹在一个元素（比如<span>、<div>）中，然后给这个元素设置grid-area: b，和原来的子元素用法完全一致。

修改后的代码示例：

CSS #

.parent {
  background-color: lightgrey;
  display: grid;
  grid:
    ".    .   .   ." 1rem
    ".    a   .   ." 1fr
    ".    .   b   ." 1fr
    ".    .   .   ." 1rem
    /1rem 1fr 1fr 1rem;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

HTML #

<div class="parent">
  <div class="a">lorem ipsum dolor sit amet</div>
  
  <!-- 把文本包裹在span中，指定grid-area -->
  <span class="b">lorem ipsum dolor sit amet</span>
</div>

有没有不添加额外元素的方法？ #

目前没有可靠的方法能实现：因为匿名网格项无法被选中，我们没法单独为它设置网格位置。如果尝试通过父元素的网格规则调整，文本节点会按照默认的网格流填充，无法精准定位到指定的grid-area。所以还是推荐使用「包裹元素」的方案，代码更清晰，也不会有兼容性问题。

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