Re: [csswg-drafts] [css-grid-2] subgrid and grid-gap

It might be possible to solve this by introducing a track alignment step for subgridded axes.  Currently, this doesn't occur since a subgrid doesn't do any track sizing/alignment of its own in a subgridded axis.  If we do the alignment part though then the author can control the subgrid layout using `align-/justify-content` and `align-/justify-self` on the subgrid.  I think it's important that tweaking the track sizes in the subgrid like this doesn't feedback into the [TSA](https://drafts.csswg.org/css-grid/#algo-track-sizing) run by the parent grid though, or we'll get bad circular dependencies.  So with that caveat, I implemented this in my subgrid prototype and it seems to work well.  The parent `grid-gap` is still reflected in the parent grid, so the author would need to account for that.  So, for example, this is what @rachelandrew's [subgrid example](https://rachelandrew.co.uk/archives/2017/07/20/why-display-contents-is-not-css-grid-layout-subgrid/) looks like with `grid-gap:20px` in the parent grid and `align-content:start; align-self:start; grid-gap:0` in the subgrid: 
![rachel_andrew_subgrid_example-no-subgrid-grid-gap](https://user-images.githubusercontent.com/4010828/39087743-db48e878-45a5-11e8-955f-000f7b4f5e53.png)
Note that the gap between the two rows of subgrids is 80px (60px since the subgrid now doesn't fill up the extent of the four tracks it spans + 20px from a parent row gap there).  Changing the grid-gap in the parent to `grid-gap:5px 20px` would give the desired 20px distance between the rows. Or, the author could use this excess space to do fun stuff like:
![rachel_andrew_subgrid_example-no-subgrid-grid-gap-align-self-end](https://user-images.githubusercontent.com/4010828/39087887-3994e3da-45a8-11e8-9516-ca37cae9499c.png)
(by adding the rule: `.card:nth-child(2n+1) { align-self: end; }`)

For this to happen the [subgrid spec](https://drafts.csswg.org/css-grid-2/#subgrid-items) needs to remove bullet 'e' (and 'g' and 'h' but I think I've already requested that elsewhere).

-- 
GitHub Notification of comment by MatsPalmgren
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2285#issuecomment-383324179 using your GitHub account

Received on Saturday, 21 April 2018 19:38:00 UTC