Thanks for pointing me to the docs, I hadn't looked there, (my bad, I know).
I wondered about the figure + p option, but it's imperfect, because sometimes the first p will be short, (content is coming from a CMS). It's better than nothing, but I might go and re-think my strategy for this part of the document. There's a codepen here: https://codepen.io/johnbeales/pen/yzNmqm On Sat, Sep 16, 2017 at 4:55 AM Philippe Wittenbergh <ph...@l-c-n.com> wrote: > > > On Sep 16, 2017, at 3:05 AM, John Beales <j...@johnbeales.com> wrote: > > > > On the blog I'm coding each post is a container with a 12-column grid. > Most > > of the things that appear in each post, (paragraphs, blockquotes, etc), > > span 8 columns: 3 - 10. However, I want to be able to pull them out to > the > > left or right - say a <figure> that spans columns 2-4, and have the > > following paragraphs flow around it, similar to if I had no grid, and > > floated a <figure> to the left or right, maybe giving it a bit of > negative > > margin to pull it out of the content area. > > > > Is this possible? I had thought that setting a float on the <figure> > (which > > is a direct child of the grid container, as are the <p> tags and so on), > > would do the job, but it's not. The <p> following the <figure> ends up > > below the <figure>. > > The float property does not apply to grid-items (your <figure /> in this > case). see: > https://drafts.csswg.org/css-grid/#grid-containers > > Maybe something like this will work (hard to say, can you provide a URL or > a test case?) > > figure { grid-column: 2 / 4; } > > figure + p { grid-column: 5 / 10; } > > Philippe > -- > Philippe Wittenbergh > https://l-c-n.com/ > > > > > > > ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
