CODEWITHSUNDEEP
htmlcsscss-grid
John B
John B

Reputation: 471

Possible to flow content around a Grid-Item?

I'm laying out some content with the new CSS Grids layout module. There are several paragraphs that are 8 columns wide, and I would like to add a figure that's 3 columns wide, in columns 1-3, and have the paragraphs that follow it flow into the space to the right of the figure.

Is this possible? In the non-grid world I would simply add a float:left; to the figure. This is the behaviour I would like to mimic.

I don't know how long the paragraphs that follow the figure are going to be, so I can't just say "the next X paragraphs occupy columns 4-8."

Here's a CodePen of a stripped-down example.

.grid-container {
  display:grid;
  grid-template-columns: repeat( 6, 1fr );
  width: 50%;
  border:1px solid #eee;
  margin: 1em auto;

}

.grid-container p {
  grid-column: 1 / 6;
}

.grid-container figure {
  grid-column: 1/3;
  background: rgba( 155, 155, 255, 0.5 );
  margin:0;
  padding: 1em;
  
  /* Hoping this will be enough to make the paragraphs after the figure flow around it, but apparently not. */
  float:left;
}

figure img {
  width: 100%;
  height:auto;
}

figcaption {
  margin-top:0.5em;
}
<html>
  <head>
    <title>A Floating Grid Item?</title>
  </head>
  <body>
    <div class="grid-container">
      <p>Fake Lipsum - is that even a real thing? Lipsi lipsum lipsooo doo.</p>
      <figure>
        <img src="http://38.media.tumblr.com/3a8dee9aae420a0048907c54ff701fc8/tumblr_n8m6qv50X11r238sko1_500.jpg" alt="A cat">
        <figcaption>I want the paragraph(s) below to flow around this box.</figcaption>
      </figure>
      <p>I want this to flow around the image. Please?</p>
      <p>It would be great if this would flow too, if it's not naturally below the image because of the amount of text.</p>
      <p>Again, it would be great if this would flow too, if it's not naturally below the image because of the amount of text.</p>
      <p>Yet again, it would be great if this would flow too, if it's not naturally below the image because of the amount of text.</p>
      
    </div>
  </body>
</html>

Upvotes: 1

Views: 406

Answers (2)

Keshav Bhadouria
Keshav Bhadouria

Reputation: 199

The text you want to flow around the fig. goes in a div and then flow the fig.

<html>
<head>
<title>A Floating Grid Item?</title>
</head>
<body>
<div class="grid-container">
  <p>Fake Lipsum - is that even a real thing? Lipsi lipsum lipsooo doo.</p>
  <figure>
    <img src="http://38.media.tumblr.com/3a8dee9aae420a0048907c54ff701fc8/tumblr_n8m6qv50X11r238sko1_500.jpg" alt="A cat">
    <figcaption>I want the paragraph(s) below to flow around this box.</figcaption>
  </figure>

  <div class="text">
  <p>I want this to flow around the image. Please?</p>
  <p>It would be great if this would flow too, if it's not naturally below the image because of the amount of text.</p>
  <p>Again, it would be great if this would flow too, if it's not naturally below the image because of the amount of text.</p>
  <p>Yet again, it would be great if this would flow too, if it's not naturally below the image because of the amount of text.</p>
  </div>
  </div>
  </body>
  </html>

use this CSS

   .text {grid-column: 3 / 6;float:left;}

Upvotes: 2

John B
John B

Reputation: 471

According to the CSS Grid Specification float has no effect on grid-items, so I don't think there's a great way to make this happen.

Keshav's answer is the best way to make it so a short paragraph right beside the figure doesn't mean the next paragraph will drop below the figure.

If we can be sure that the paragraph immediately following the figure is long enough to pass the figure we can do something like this with the CSS:

figure { grid-column: 2 / 4; }
figure + p { grid-column: 5 / 10; }

But it doesn't guard against having a gap between the paragraph immediately following the figure and the paragraph after that, and neither solution lets the text flow right underneath the figure.

Upvotes: 0

Related Questions