How to span to the last column in an implicit grid?

Question

I want an item to start at the first column and end at the last column, no matter how many columns there are.

It should work like this:

Answer 1

This will span item to the last available column:

grid-column-end: max-content;

Answer 2

Why shouldn't it work on implicit grids?

Because we can easily run on undefined cases¹ or a cyclic dependency. If it was the implicit grid, it means that we need to first place all the others element to identify the implicit grid then we place our element BUT if we place our element we will obtain another implicit grid so technically you cannot know the implicit grid without placing the element.

The idea behind the implicit grid is to place the element that doesn't have anything defined for their placement automatically after placing the ones with known places.

---

You can overcome this by using some hacks either for row or column:

Stretch an element to the end of the automatically calculated grid, not just the explicit grid

Forcing a column to be empty in a responsive grid layout

---

¹ A basic example:

.grid {
  display: grid;
  grid-template-columns: 50px;
  grid-gap: 5px;
  grid-auto-flow: column;
  grid-auto-columns:50px;
}

.grid>span {
  height: 50px;
  background: red;
}

.grid>span.place {
  grid-column: 1 / -1;
  background: blue;
}

<div class="grid">
  <span></span>
  <span class="place"></span>
</div>

Logically we will first place the blue span in the explicit grid then the we place the red one automatically to obtain an implicit grid of 2 columns.

Considering your logic I have the following cases:

1. I change the place of the blue so it takes the two columns which will move the red to a third one. I repeat again (an infinite loop)

2. I change the place of the blue so it takes two columns and overlap the red one (not really logical and intuitive)

3. I don't place the blue but I first place the red then I either overlap the red one (not logical) or I place the blue in that column and push the red to anoher one and I get back to (1)

Answer 3

So this would only work on explicit grids? Why shouldn't it work on implicit grids?

Because that's what is defined in the Grid 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).

That's the current state of Grid technology. The spec is only at Level 1. It can't do everything (yet).

Here are some wishlist items that may be fulfilled in future versions of the spec:

• Positioning content of grid items in primary container (subgrid feature)
• What are the areas covered by Flexbox which are difficult or impossible to achieve with Grid?
• Make a grid item span to the last row / column (hacks)

It looks like the subgrid feature is being addressed in Grid Level 2.