I am trying to create a general solution to a problem I encounter fairly often.
I am attempting to use the checkbox hack in tandem with a CSS grid in order to create a tabbed navigation menu that doesn't need to be modified when the HTML changes. If you run the code snippet, you'll see that you can add or remove any of the input/label/section trios and the CSS can just handle it.
What I am failing to accomplish is getting the second row to span all columns effectively filling the available space. I have come to understand that I am unable to get a row to span all columns unless I define an explicit grid. Unfortunately, defining a set number of columns defeats the whole purpose of what I am trying to do.
Working under the constraint that the HTML will always be input/label/section blocks in that order, is there any way to get that second row to span all columns without defining a set number of columns? I tried to get this to work using flexbox, but I couldn't get the columns right.
I am trying to get this with just CSS please, no javascript.
#Wrapper {
display: grid;
grid-auto-columns: 1fr;
grid-template-rows: 2em calc(100% - 2em);
height: 100%;
width: 100%;
}
#Wrapper section,
input[name=buttons] {
display: none
}
/*This doesn't work*/
#Wrapper section {
grid-column-start: 1;
grid-column-end: -1;
}
#Wrapper input[name=buttons]+label {
border-style: solid;
border-width: 1px;
cursor: pointer;
grid-row-start: 1;
grid-row-end: 2;
}
#Wrapper>input[name=buttons]:checked+label {
background-color: red;
}
#Wrapper>input[name=buttons]:checked+label+section {
display: block;
width: 100%;
}<div id='Wrapper'>
<input type='radio' id='TabButton1' name='buttons' checked></input>
<label for='TabButton1'>SECTION 1</label>
<section>
This is some content 1
</section>
<input type='radio' id='TabButton2' name='buttons'></input>
<label for='TabButton2'>SECTION 2</label>
<section>
This is some content 2
</section>
<input type='radio' id='TabButton3' name='buttons'></input>
<label for='TabButton3'>SECTION 3</label>
<section>
This is some content 3
</section>
<input type='radio' id='TabButton4' name='buttons'></input>
<label for='TabButton4'>SECTION 4</label>
<section>
This is some content 4
</section>
<input type='radio' id='TabButton5' name='buttons'></input>
<label for='TabButton5'>SECTION 5</label>
<section>
This is some content 5
</section>
</div>