Filling remaining columns

[ghcassell]

Hi,

Is it possible to fill remaining columns?

For example, I have a grid with the following columns:

grid-columns-template: repeat(auto-fit, minmax(50px, 1fr));

I am filling a grid with items that can have different properties:

Span N - I am achieving this with grid-column: auto / span <N>;

Span All - I am acheiving this with grid-column: 1 / -1;

Span Remaining - I had initially assumed I could do grid-column: auto / -1;

JSBin demo

However, rather than spanning the remaining columns it spans 1 in the last column. Is there any way to do this without javascript to calculate and set it (which I have resorted to)?

Thanks.