Making an element span all columns on a grid with automatic columns

Question

I have a CSS grid with automatic columns and 2 rows, where all but a specific element go into the first row. The special element is placed on the second row, and should fill the whole space used by all columns.

The current implementation is like this:

.TabArea {
  display: grid;
  grid-auto-columns: auto;
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  
  /* for visualization purposes */
  background: gainsboro;
}

.Tab-title {
  grid-row: 1;
}

.Tab-body {
  grid-row: 2;
  grid-column: 1 / -1;
  
  /* for visualization purposes */
  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>

But as you can see, the Tab-body is only placed on the first column, despite the fact there are additional columns. How can I make it span all columns?

The solution in https://stackoverflow.com/a/44052563/1045510 does not work here because the number of columns is variable, and columns would take up space on the end, pushing the Tab-titles to the left.

You should read all the solutions in [the post you referenced](https://stackoverflow.com/q/44052336/3597276). The accepted answer is just one, and it's an ugly and useless hack, in my opinion. You'll gain a better understanding of the problem in the others. — Michael Benjamin, Jul 03 '18 at 15:35

score 2 · Answer 1 · answered Jul 03 '18 at 14:43

2

I think you need to use span in order to make it span across columns as you can only use negative integers in an explicit grid:

.TabArea {
  display: grid;
  grid-auto-columns: auto;
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  
  /* for visualization purposes */
  background: gainsboro;
}

.Tab-title {
  grid-row: 1;
}

.Tab-body {
  grid-row: 2;
  grid-column-start: 1;
  grid-column-end: span 3;
  
  /* for visualization purposes */
  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>

answered Jul 03 '18 at 14:43

Pete

57,112
28
117
166

1

I was afraid that was the answer. Guess I'll have to feed the column count from JS, since on the real thing the number of columns is not fixed. I'll accept this tomorrow, just in case someone finds a workaround. – This company is turning evil. Jul 03 '18 at 14:48
@Kroltan if you use server side code to create the titles, you could count the number of them and just create an inline style on the tab body, that way you wouldn't have to wait for the js to kick in before the style is shown – Pete Jul 03 '18 at 14:55
1

@Pete That's basically my idea, but it's a React app so it doubles up as server and client side. – This company is turning evil. Jul 03 '18 at 14:59
Ah cool, that shouldn't be too much of an issue using js to put in the span then – Pete Jul 03 '18 at 15:00
1

@Pete my mistake, I didn't think you could create new columns with `span`. I deleted that last comment – Danield Jul 03 '18 at 15:02

Making an element span all columns on a grid with automatic columns

1 Answers1