[css-grid] Control size of individual gutters independently

[tabatkins]

Thread starting here asks for the ability to manually control gutter sizes, so they can be different sizes in different spots.

Right now, the only way to do so is to create it as a track, and then either explicitly avoid placing according to that track, or use a dummy element to fill that track (so auto-placed items avoid it, tho this means they can't span across it either).

There's some suggestions in the thread to extend the grid-gap syntax to allow multiple lengths, interpreted as a repeat pattern.

I'd prefer building this into the grid-template syntax. We already have a place in the syntax for line names, which live in the gutter between the tracks; we can throw in a gap(<length>) function as well, which can only be put between tracks, and which overrides the grid-gap property. (That is, grid-gap sets the default gap size, but you can manually override it.)

[Nokel81]

My only concern with having this be a part of grid-template is that that requires the explicit naming of the sub objects. The benefit to the pattern based approach is that the contents of the grid can be left "unclassified"

[praveenpuglia]

How does the grid-template syntax address the repetition of a pattern for gutters?

Example - I need 12 columns with a repeating grid-gap pattern of 1rem and 2rem and all my column names remain [col] with all tracks being 1fr.

It would be amazing if we could do something like this without breaking the existing syntax.

.container {
  display: grid;
  /*Because obviously you can't repeat the pattern 11 times or 6 times 
  and say discard the values that go into it. 
  So this repeat function just tries to repeat those length values as long as 
  it can and the first argument isn't a <number>*/
  grid-gap: repeat(1rem, 2rem)  3rem;
}

Here, the grid-column-gap has a pattern of 1rem and 2rem and we get 3rem gutter on rows.

Didn't put a lot of thoughts into parsing so not sure how many things this might break.

[Nokel81]

If repeat accepted any number of values I would be completely for this solution as long as using it just for columns of rows was also allowed

[praveenpuglia]

@Nokel81 I updated my answer to include how this new repeat syntax would work

[jhpratt]

Another option is to do grid-gap: 1rem 2rem / 3rem. Not sure on the pros and cons of the two options implementation-wise, though.

[Nokel81]

What do you mean by by the first argument isn't a */?

[Nokel81]

@jhpratt I would prefer the have it act like a function so that it is easier to read that it is actually repeating

[praveenpuglia]

@jhpratt - that syntax would be really simple but doesn't convey anything about repetition. A repeat syntax makes it really clear that it has to be repeated.

@Nokel81 Right now, the repeat syntax takes a number as first arguments to figure out how many times it needs to repeat. I skipped the auto-fill keyword which might solve my issue too. So the updated syntax will be like,

grid-gap: 3rem / repeat(auto-fill, 1rem 2rem);

I have now included the slash to make sure we understand the separation for columns and rows. Also, in grid-gap row comes before column so i reversed the order.

[Nokel81]

Yes, having auto-fill would be a must because of the auto columns/rows in grids. This is nice and explicit, it does what I believe it should be able to be done and it should work with each direction individually. Lastly, it wouldn't overlap with the current spec because it is a function

[rachelandrew]

I'd generally prefer having it as part of the grid-gap properties instead of or in addition to grid-template, if only because a complex grid-template setup is something I find people struggle with when I'm teaching this stuff.

We have other stuff that accepts a track listing (eg. grid-auto-rows) so it would be consistent to add that capability here too.

[rachelandrew]

@jhpratt I'm perfectly capable of teaching it ;) what I am observing is where people learning get confused. As I think that is useful data in terms of designing stuff people have to use.

[SebastianZ]

Adding this to grid-template limits its usage to explicit grids. Though I assume people may also like to apply different gaps to implicit grids.

Non-the-less, the solutions are non-exclusive, i.e. there might be some way to specify the gaps for the explicit grid, which will either be overwritten by grid-gap or grid-gap then defines the gaps for the implicit grid. (Or there might be some switch that controls to what grid-gap applies.

Sebastian

[Nokel81]

One question that needs to be answered is what the auto gap would be if auto-fill is not used. Or would it be required?