I'm trying to use CSS display grid, but it doesn't appear the way I expect. Here's my code:
<!DOCTYPE html>
<html>
<style>
legend {display:block;}
label {display:none;}
fieldset, .fieldset-header {
display:grid;
grid-template:50px / 300px 100px 100px 100px;
}
label {display:none;}
.fieldset-header span:nth-child(n+2) {text-align:center;}
</style>
<body>
<div class="fieldset-header">
<span>Question</span>
<span>Bad</span>
<span>Average</span>
<span>Good</span>
</div>
<fieldset>
<legend>How was the hamburger?</legend>
<input type="radio" id="q1-bad" name="q1" /><label for="q1-bad">Bad</label>
<input type="radio" id="q1-average" name="q1" /><label for="q1-average">Average</label>
<input type="radio" id="q1-good" name="q1" /><label for="q1-good">Good</label>
</fieldset>
<fieldset>
<legend>How was the soft drink?</legend>
<input type="radio" id="q2-bad" name="q2" /><label for="q2-bad">Bad</label>
<input type="radio" id="q2-average" name="q2" /><label for="q2-average">Average</label>
<input type="radio" id="q2-good" name="q2" /><label for="q2-good">Good</label>
</fieldset>
</body>
</html>
In FireFox, it looks like this:
In Chrome, it looks like this:
What am I doing wrong? Why won't the items display as grid?
Temporary Bandaid Solution
For now, I'm going to cheat by wrapping a <div> around the legends, inputs and labels like this:
<style>
fieldset div, .fieldset-header {
display:grid;
grid-template:50px / 300px 100px 100px 100px;
}
</style>
<fieldset>
<div>
<legend>How was the soft drink?</legend>
<input type="radio" id="q2-bad" name="q2" /><label for="q2-bad">Bad</label>
<input type="radio" id="q2-average" name="q2" /><label for="q2-average">Average</label>
<input type="radio" id="q2-good" name="q2" /><label for="q2-good">Good</label>
</div>
</fieldset>
Now I get the behaviour I want:
Would be great if someone can tell me what I did wrong with my CSS grid in my initial approach?
