I've been experimenting with the new CSS Grids layout module to arrange my content. I have a set of paragraphs that are 8 columns wide, and I'm looking to insert a figure that spans 3 columns in columns 1-3. After that, I want the following paragraphs to flow into the space next to the figure.
Is there a way to achieve this with CSS Grid? In traditional non-grid layouts, I would simply use float:left; on the figure. How can I replicate this behavior within CSS Grid?
The challenge is that I don't know the exact length of the paragraphs that come after the figure, making it difficult to designate specific columns for them.
To see a simplified example, you can visit this CodePen demo.
.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;
}
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>