Re: [css-d] CSS Grid: Can I flow content around blocks?

[John Beales]

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 
wrote:

>
> > On Sep 16, 2017, at 3:05 AM, John Beales  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  that spans columns 2-4, and have the
> > following paragraphs flow around it, similar to if I had no grid, and
> > floated a  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 
> (which
> > is a direct child of the grid container, as are the  tags and so on),
> > would do the job, but it's not. The  following the  ends up
> > below the .
>
> The float property does not apply to grid-items (your  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/

Re: [css-d] CSS Grid: Can I flow content around blocks?

[Philippe Wittenbergh]

> On Sep 16, 2017, at 3:05 AM, John Beales  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  that spans columns 2-4, and have the
> following paragraphs flow around it, similar to if I had no grid, and
> floated a  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  (which
> is a direct child of the grid container, as are the  tags and so on),
> would do the job, but it's not. The  following the  ends up
> below the .

The float property does not apply to grid-items (your  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/