How do you add content to a grid cell without HTML? - html

Question

I am trying to fill the empty field (column 1, row 2) with standard content (i.e. "NOT AVAILABLE"). I was not available to come up with any appropriate solution within CSS - tried a few approaches with CSS selectors, but without any luck.
How do I achieve this, without using JS or adding an empty element in the HTML source? The reason I don't want to use other technologies is because we cannot alter the original HTML content.
.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>

Answer 1

In CSS Grid, CSS pseudo-elements are treated as grid items. (This is the equivalent behavior of pseudo-elements in flexbox, which are flex items.)
Therefore, using CSS alone, you can achieve your goal:
.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>