Oh yes, I forgot how they worked.
With CSS grid, if you use named areas, can you place the invisible checkbox and the span at the same place? That's what Scott was referring to earlier.
HTML:
<div class="foo-container">
<input type="radio" class="foo0"" name="attr_foo" value="0" /><span class="foo0"></span>
<input type="radio" class="foo1"" name="attr_foo" value="1" /><span class="foo1"></span>
<input type="radio" class="foo2"" name="attr_foo" value="2" /><span class="foo2"></span>
<input type="radio" class="foo3"" name="attr_foo" value="3" /><span class="foo3"></span>
<input type="radio" class="foo4"" name="attr_foo" value="4" /><span class="foo4"></span>
</div>
CSS:
.sheet-foo-container {
grid-template-areas:
"area0 area1 area2 area3 area4"
}
.sheet-foo0 {gridarea: area0}
.sheet-foo1 {gridarea: area1}
.sheet-foo2 {gridarea: area2}
.sheet-foo3 {gridarea: area3}
.sheet-foo4 {gridarea: area4}
You'd also need to set the opacity and other styling stuff, and maybe z-order, but for the basic layout this seems like it should work.
Edit: I renamed some elements to make it more understandable which part of the code was doing which task.
You give each element you want to position a name, using the gridarea tag. And in grid-template-areas, you use those names to position the elements in the layout you want.