W3C home > Mailing lists > Public > www-style@w3.org > March 2016

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

From: Francois Remy <francois.remy.dev@outlook.com>
Date: Mon, 7 Mar 2016 09:04:13 -0800
Message-ID: <DUB408-EAS299F109E0C14DBB699E435DA5B10@phx.gbl>
To: "'Nate Green'" <heynategreen@gmail.com>, <www-style@w3.org>
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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:01 UTC