[css-grid-2] subgrid and grid-gap · Issue #2285 · w3c/csswg-drafts (original) (raw)

https://www.w3.org/TR/2018/WD-css-grid-2-20180206/#subgrids

In the article "Why display: contents is not CSS Grid Layout subgrid" by Rachel Andrew, she points out an extremely common use case for why we need subgrid. As far as I can tell, the current version of the spec is not able to support this use case.

My issue is around how subgrid is supposed to work around the grid-gap property.

The spec currently says this:

https://www.w3.org/TR/2018/WD-css-grid-2-20180206/#valdef-display-subgrid
If the element is a grid item ... this value makes the element a subgrid ... and consequently ignores its grid-template-* and * -gap properties in favor of adopting the parent grid tracks that it spans.

In the examples in the article, each card is surrounded by a 20px grid-gap. If the items inside each card were to strictly align to the grid cells of the outer grid, then there would also be a 20px gap between the title, image, content and footer. We want each card to be separated by that 20px gap but we also want each item inside the card to sit hard up against each other. That isn't possible if the grid-gap property is ignored.

I think by default, the subgrid should inherit whatever the parent grid-gap property is. That's fine and could cut down on repetition if that is the behavior you want. However, we need to be able to override this behavior by setting the grid-gap property on the subgrid element. That way the items inside each card can then sit hard up against each other while the cards themselves can still enjoy a nice 20px gap between them.

.card { border: 4px solid rgb(24,154,153); background-color: #fff; grid-row: auto / span 4; display: grid; grid: subgrid;

/* Overrides parent grid-gap setting. Causes cells inside subgrid to sit hard up against one another */ grid-gap: 0; }