Re: [css-grid] Reduced Subgrid Proposal

On Wed, Apr 20, 2016 at 10:57 AM, Eric A. Meyer <eric@meyerweb.com> wrote:
> On 14 Apr 2016, at 18:55, Tab Atkins Jr. wrote:
>> display:subgrid is very similar to display:contents - the elements'
>> children position/size/etc in the *parent* grid instead.  Except:
>>
>> * they get positioned "as a group" - they can only fill the grid cells
>> that the subgrid does (which is predefined - subgrids need an explicit
>> grid span in both dimensions)
>
> This makes general sense to me.  By "explicit grid span", do you mean "must
> provide start and end lines" or is it sufficient to provide start lines and
> assume "span 1" for the end lines?

We have to be able to tell what its span is; whether you do that by
providing explicit start/end lines, or an explicit span, or just rely
on the default "span 1" behavior, doesn't matter to us.

>> * when sizing, the subgrid itself contributes - it acts like an empty
>> grid item in the parent grid, and its children that touch one of its
>> edges act like they have extra margin equal to the m/b/p of the
>> subgrid on that edge, so they'll *look* like they're visually aligned
>> *within* the subgrid by default (despite laying out in the parent grid
>> instead).
>
> So given:
>
>    ol#panels {display: subgrid; border: 2px solid gray; padding: 1em;}
>    ol#panels li {margin: 0.5em; border: 1px solid silver;}
>
> …then the borders of the list items that are at the edges of the subgrid
> would be offset 1.5em from the inner border edge of the ordered list, and
> (1.5em + 2px) from the grid lines that bound the ordered list?

Yes.

> If I've understood all this correctly, the subgrid proposal on offer here
> would easily handle <http://www.giftcards.com/virtual-gift-cards>, which an
> attendee at AEA Seattle showed me while we were talking about advanced
> layout.  Am I in fact correct about that?

The "subgrid" part is the image+text of card?  Then I think so, yeah.
The content area would have to be a grid on its own so it can sprout
implicit rows (probably nested within a page-level grid that handles
the header/footer), and then each card would just be a 1col×2row
subgrid.

~TJ

Received on Wednesday, 20 April 2016 18:22:00 UTC