Can a grid cell span every column without specifying the number of columns?

Question

I have a grid with a dynamically generated number of rows and columns. The cells are placed individually with grid-column-start.

I also have accompanying headings which need span every column. I would expect grid-column-start: 1; grid-column-end: -1 to produce this behaviour. However, it only does so if the number of columns is specified in advance with grid-template-columns.

See the following demonstration:

.grid {
  display: grid;
  grid-gap: 5px;
}

.grid--three {
  grid-template-columns: auto auto auto;
}

.grid--auto {
  grid-auto-columns: auto;
}

.grid-heading {
  background: pink;
  grid-column-start: 1;
  grid-column-end: -1;
  padding: 5px;
}

.grid-cell {
  background: lightblue;
  padding: 5px;
}

.grid-cell--1 {
  grid-column-start: 1;
}

.grid-cell--2 {
  grid-column-start: 2;
}

.grid-cell--3 {
  grid-column-start: 3;
}

<h3>Three column grid</h3>

<div class="grid grid--three">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell">
    one
  </div>
  <div class="grid-cell">
    two
  </div>
  <div class="grid-cell">
    three
  </div>
</div>

<h3>Any column grid</h3>

<div class="grid grid--auto">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell grid-cell--1">
    one
  </div>
  <div class="grid-cell grid-cell--2">
    two
  </div>
  <div class="grid-cell grid-cell--3">
    three
  </div>
</div>

Is it possible to get full column spanning behaviour without prescribing the number of columns?

Is there a way for you to supply the generated number of columns to the layout? You can avoid all of the hassle this way — Evgenii Klepilin, Jan 23 '20 at 04:00
I can dynamically determine the number of columns needed, but that's not the point. — David L. Walsh, Jan 23 '20 at 04:12

score 1 · Accepted Answer · answered Jan 23 '20 at 03:51

Unfortunately, no. This is not possible with the current version of CSS Grid (Level 1).

For a grid area to expand across all columns or rows, using the negative integer method (1 / -1), you'll need an explicit grid container.

From the specification:

7.1. The Explicit Grid

Numeric indexes in the grid-placement properties count from the edges of the explicit grid.

Positive indexes count from the start side (starting from 1 for the start-most explicit line), while negative indexes count from the end side (starting from -1 for the end-most explicit line).

and here...

8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

hi Michael_B. You can probably help here: https://stackoverflow.com/q/59919727/8620333 .. After a very long discussion, the OP is not convinced by my answer. Probably I am not using good words or I am explaining it wrong. Maybe you can clear up the confusion from a different perspective. — Temani Afif, Jan 27 '20 at 22:33

score 1 · Answer 2 · answered Jan 23 '20 at 15:49

position:absolute can do this but it remain a hacky way as you will need an extra element to take the first cell and have your real element on the top filling the whole row. It can be tricky if it's not the first row.

.grid {
  display: grid;
  grid-gap: 5px;
  position:relative; /* Don't forget this */
}

.grid--three {
  grid-template-columns: auto auto auto;
}

.grid--auto {
  grid-auto-columns: auto;
}
/**/
.grid:before {
   content:"\80"; /* Zero width invisible character */
   padding:5px;
   grid-column: 1/-1;
}
.grid-heading {
  background: pink;
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding: 5px;
}
/**/

.grid-cell {
  background: lightblue;
  padding: 5px;
}

.grid-cell--1 {
  grid-column-start: 1;
}

.grid-cell--2 {
  grid-column-start: 2;
}

.grid-cell--3 {
  grid-column-start: 3;
}

<h3>Three column grid</h3>

<div class="grid grid--three">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell">
    one
  </div>
  <div class="grid-cell">
    two
  </div>
  <div class="grid-cell">
    three
  </div>
</div>

<h3>Any column grid</h3>

<div class="grid grid--auto">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell grid-cell--1">
    one
  </div>
  <div class="grid-cell grid-cell--2">
    two
  </div>
  <div class="grid-cell grid-cell--3">
    three
  </div>
</div>

Can a grid cell span every column without specifying the number of columns?

2 Answers2