如何在没有 HTML 的情况下将内容添加到网格单元格？答案

【问题标题】：How do you add content to a grid cell without HTML?如何在没有 HTML 的情况下将内容添加到网格单元格？
【发布时间】：2018-12-30 21:02:38
【问题描述】：

我正在尝试使用标准内容（即“不可用”）填充空白字段（第 1 列，第 2 行）。我无法在 CSS 中提出任何合适的解决方案 - 尝试了一些使用 CSS 选择器的方法，但没有任何运气。

如何在不使用 JS 或在 HTML 源代码中添加空元素的情况下实现这一点？我不想使用其他技术的原因是我们无法更改原始 HTML 内容。

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.itemA{
  grid-column: 1;
  border: 1px solid black;
}
.itemB{
  grid-column: 2;
  border: 1px solid black;
}

  <div class="grid">
    <div class="itemA">Content A</div>
    <div class="itemB">Content B</div>
    <div class="itemB">Content C</div>
  </div>

【问题讨论】：

标签： html css grid css-grid

【解决方案1】：

在 CSS Grid 中，CSS 伪元素被视为网格项。（这是 pseudo-elements in flexbox 的等效行为，它们是弹性项目。）

因此，单独使用 CSS 就可以实现目标：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid::before {
  content: "NOT AVAILABLE";
  grid-column: 1;
  grid-row: 2;
}

.itemA {
  grid-column: 1;
  border: 1px solid black;
}

.itemB {
  grid-column: 2;
  border: 1px solid black;
}

<div class="grid">
  <div class="itemA">Content A</div>
  <div class="itemB">Content B</div>
  <div class="itemB">Content C</div>
</div>

【讨论】：