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

> On Mar 7, 2016, at 12:04 PM, Francois Remy <francois.remy.dev@outlook.com> wrote:
> 
> What you need in this case is a CSS Regions (or similar) proposal.
> 
> Grid itself provides layout, not content-mangling capacities.

Thanks for clarifying. I suppose that makes sense, though I don't naturally divide the concepts up that way in my head.

> 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.
> 

Yes, that would probably solve for this case adequately. I will have to check out CSS Regions; for some reason I thought that spec was dead. Thanks again.

> 
>> -----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 19:07:57 UTC