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:

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

    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 [mailto:heynategreen@gmail.com]
> Sent: Sunday, March 6, 2016 6:56 AM
> To: www-style@w3.org
> 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