W3C home > Mailing lists > Public > public-css-archive@w3.org > February 2018

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

From: Daniel Tonon via GitHub <sysbot+gh@w3.org>
Date: Wed, 07 Feb 2018 09:18:22 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-295060527-1517995101-sysbot+gh@w3.org>
Dan503 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid-2] subgrid and grid-gap ==

In the article "[Why display: contents is not CSS Grid Layout subgrid](https://rachelandrew.co.uk/archives/2017/07/20/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 main 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;

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2285 using your GitHub account
Received on Wednesday, 7 February 2018 09:18:30 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:24 UTC