I am working on a CSS grid layout with automatic columns and 2 rows. All elements are normally placed in the first row except for one special element that should span both rows while filling all available column space.
My current code looks like this:
.TabArea {
display: grid;
grid-auto-columns: auto;
grid-template-rows: auto 1fr;
grid-auto-flow: column;
/* styling for visualization */
background: gainsboro;
}
.Tab-title {
grid-row: 1;
}
.Tab-body {
grid-row: 2;
grid-column: 1 / -1;
/* additional styling */
background: beige;
}<div class="TabArea">
<div class="Tab-title">Title A</div>
<div class="Tab-title">Title B</div>
<div class="Tab-title">Title B</div>
<div class="Tab-body">content</div>
</div>However, I am facing an issue where the Tab-body element is only spanning the first column instead of all columns. How can I adjust my code to make it span across?
The solution provided at does not apply in this case as the number of columns varies, resulting in uneven distribution when using that method.