RE: [css-grid] Flowing items within columns/rows

What you need in this case is a CSS Regions (or similar) proposal.

Grid itself provides layout, not content-mangling capacities.

How I would solve this problem using regions and grids:

        <p>Content <aside>xyz</aside> then more content</p>

    article { display: grid; grid-template-columns: 640px 1fr; }
    article > p { display: contents; flow-contents-into: paragraph-content }
    article > p aside { flow-into: asides }
    article > p::before { /*grid-column: 1;*/ flow-contents-from: paragraph-content; }
    article > p::after { /*grid-column: 2;*/ flow-contents-from: asides; }

This isn't perfect in edge cases where asides are bigger than the paragraph, but you could make this work using :hover & clip-path, or something.

> -----Original Message-----
> From: Nate Green []
> Sent: Sunday, March 6, 2016 6:56 AM
> To:
> Subject: [css-grid] Flowing items within columns/rows
> Hello. I would like to verify whether the following capability is afforded by
> the grid layout spec:
> I would like to take items from within a swathe of content in one column and
> place them into another column. However, content in each column should
> appear right below the previous item in that column, as if they were flow
> items within a container. In other words, rather than laying out items in a
> column as if they are cells in a table (where each item is aligned to a row of
> items in the other columns), items would be placed in a column one after
> another, with no apparent row alignment.
> An example to (hopefully) clarify what I mean: putting contextual notes
> (children of paragraphs) into the margin of a page as one list; in my testing I
> have only been able to put them in a column if they align to the paragraphs
> (and not necessarily to the paragraphs they belong with).
> Thanks!
> —Nate Green

Received on Monday, 7 March 2016 17:04:47 UTC