Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-grid] Control size of individual gutters independently #1659

Open
tabatkins opened this issue Jul 28, 2017 · 23 comments
Open

[css-grid] Control size of individual gutters independently #1659

tabatkins opened this issue Jul 28, 2017 · 23 comments
Labels

Comments

@tabatkins
Copy link
Member

@tabatkins tabatkins commented Jul 28, 2017

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

This comment has been minimized.

Copy link

@Nokel81 Nokel81 commented Jul 29, 2017

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

This comment has been minimized.

Copy link
Contributor

@praveenpuglia praveenpuglia commented Jul 29, 2017

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

This comment has been minimized.

Copy link

@Nokel81 Nokel81 commented Jul 29, 2017

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

This comment has been minimized.

Copy link
Contributor

@praveenpuglia praveenpuglia commented Jul 29, 2017

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

@jhpratt

This comment has been minimized.

Copy link

@jhpratt jhpratt commented Jul 29, 2017

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

This comment has been minimized.

Copy link

@Nokel81 Nokel81 commented Jul 29, 2017

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

@Nokel81

This comment has been minimized.

Copy link

@Nokel81 Nokel81 commented Jul 29, 2017

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

@praveenpuglia

This comment has been minimized.

Copy link
Contributor

@praveenpuglia praveenpuglia commented Jul 29, 2017

@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

This comment has been minimized.

Copy link

@Nokel81 Nokel81 commented Jul 29, 2017

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

This comment has been minimized.

Copy link
Contributor

@rachelandrew rachelandrew commented Jul 29, 2017

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

This comment has been minimized.

Copy link
Contributor

@rachelandrew rachelandrew commented Jul 29, 2017

@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

This comment has been minimized.

Copy link
Contributor

@SebastianZ SebastianZ commented Jul 29, 2017

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

This comment has been minimized.

Copy link

@Nokel81 Nokel81 commented Jul 29, 2017

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?

@Nokel81

This comment has been minimized.

Copy link

@Nokel81 Nokel81 commented Jul 31, 2017

Since I am new to this, how does something like an issue move forward in the discussion of adding it to the standard? I presume it has to go to one of the meetings.

@rachelandrew

This comment has been minimized.

Copy link
Contributor

@rachelandrew rachelandrew commented Jul 31, 2017

Discussing it here is the first step, things posted here will be considered when Level 2 is discussed and when something is discussed it gets updated here so you can read the log of the conversation.

@Nokel81

This comment has been minimized.

Copy link

@Nokel81 Nokel81 commented Jul 31, 2017

Is there a known time frame for when specific levels for certain items will be discussed at the contributor level?

@rachelandrew

This comment has been minimized.

Copy link
Contributor

@rachelandrew rachelandrew commented Jul 31, 2017

If you are interested in how the CSS WG works then there is information available on that here http://fantasai.inkedblade.net/weblog/2011/inside-csswg/

There aren't specific time frames for specifications, but discussions here are valuable and also demonstrate author interest in a feature.

@tabatkins

This comment has been minimized.

Copy link
Member Author

@tabatkins tabatkins commented Aug 3, 2017

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"

No, it doesn't; what makes you assume that? Grid-template is the shorthand for the rows/columns/areas properties; are you thinking that it's just for grid-template-areas?

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

It doesn't, but I wasn't aware of a use-case presented that wants a repeated pattern of different gutters between implicit tracks. Tho hm, even if you grouped each "set" of things into a subgrid, you'd still need to establish the gutters on the outer grid, which requires a repeating pattern.

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.

Ah, this is explicit grid. Then it'd be:

grid-template-columns: repeat(6, [col] 1fr [col gap(1rem)]  1fr [col gap(2rem)] )

As opposed to using an explicit pattern in grid-column-gap:

grid-template-columns: repeat(12, [col] 1fr [col])
grid-column-gap: 1rem 2rem;
@Nokel81

This comment has been minimized.

Copy link

@Nokel81 Nokel81 commented Aug 3, 2017

Yes I was think of only grid-template-areas though I always seem to use grid-template-columns and grid-template-rows. I still think that the repeat() function in grid-gap is the cleanest solution and should cover all use cases (including individually changing gaps)

@Nokel81

This comment has been minimized.

Copy link

@Nokel81 Nokel81 commented Apr 4, 2018

Any new information on when this might be discussed?

I think that the best syntax would be

grid-column-gap: repeat(1 rem, 0 rem, 2 rem, 0 rem);

Where the pattern is repeated.

One problem I do have is that you might want to have a fixed number of fixed widths and then have it repeating.

Here there could be the following syntax:

grid-column-gap: group(fixed(1 rem, 5), repeat(1 rem, 0 rem), fixed(2 rem, 3))

This syntax means the first 5 gaps have a width of 1rem, the last 3 gaps have a width of 2rem and the intervening gaps are switching between a width of 1rem and 0.

With this syntax it can be group(fixed(), repeat()), or group(fixed(), repeat(), fixed()), or group(repeat(), fixed()), or repeat().

If there are less gaps then there are defined in the supplied fixed then the widths from the first are prioritized

@fantasai fantasai changed the title [css-grid] Control size of gutters explicitly [css-grid] Control size of individual gutters independently May 8, 2018
@fantasai

This comment has been minimized.

Copy link
Collaborator

@fantasai fantasai commented May 8, 2018

I'm proposing we defer this issue to Level 3. I want to see how far we can get with a combination of margins and subgrid, first.

@fantasai fantasai added css-grid-3 and removed css-grid-2 labels May 8, 2018
@Ericnr

This comment has been minimized.

Copy link

@Ericnr Ericnr commented May 30, 2019

I've been discouraged from using grids exactly because this is not yet possible. Would be great to see individual gutter sizes added.

@Amerlander

This comment has been minimized.

Copy link

@Amerlander Amerlander commented Jan 23, 2020

I would use this too.

At the moment I help myself with using columns which are left empty and just giving the space, but this only works, if the wider gap has to be a multiple wide of the regular ones:

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr) 0px repeat(12, 1fr)
  0px repeat(12, 1fr) 0px repeat(12, 1fr) 0px repeat(12, 1fr);
grid-template-rows: repeat(5, 2rem);
grid-column-gap: 4px;
grid-row-gap: 4px;
}

I would prefer to be able to do:

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr) repeat(12, 1fr)
  repeat(12, 1fr) repeat(12, 1fr) repeat(12, 1fr);
grid-template-rows: repeat(5, 2rem);
grid-column-gap: group(fixed(4px 4px 4px), repeat(8px 4px 4px 4px 4px 4px 4px 4px 4px 4px 4px 4px))
grid-row-gap: 4px;
}

Since this will only result in the grid columns I really use. Subgrids doesn't seem to work for me, since they would limit the placement of child elements to each subgrid, but I need to be able to place like grid-column: 2 / 24;. This is possible in the code I actually use, but I also have to keep the 'blind' columns in mind when counting and I have to worry about 'losing' an element by placing it in a blind column like grid-column: 5 / 6.

https://codepen.io/amerlander/pen/abzXrLm
grafik

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants
You can’t perform that action at this time.