是否可以指定内联文本流入哪个网格区域？

Question

如果我有一个包含子节点的父节点。

我可以在父节点上指定一个网格布局并选择子节点将在哪个 grid-area 中呈现：

.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;
}

<div class="parent">
  <div class="a">lorem ipsum dolor sit amet</div>
  <div class="b">lorem ipsum dolor sit amet</div>
</div>

如果我有一个文本节点而不是其中一个子节点，是否可以指定 grid-area 文本节点流入哪个？

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

.a {
  grid-area: a;
}

<div class="parent">
  <div class="a">lorem ipsum dolor sit amet</div>
  
  <!-- can this text be made to flow into grid-area b? -->
  lorem ipsum dolor sit amet
</div>

Answer 1

否，由于文本节点是作为匿名网格项布局的，因此您无法控制匿名网格项的布局方式。

（您可以通过操纵周围的 non-anonymous 网格项来影响其布局，但显然这将是 hit-and-miss，具体取决于您的实际网格设置。您不太可能能够让匿名网格项目占据所有特定网格区域。）

是否可以指定内联文本流入哪个网格区域？

Is it possible to specify which grid-area inline text flows into?

css

layout

css-grid