可以围绕网格项流动内容吗？答案

【问题标题】：Possible to flow content around a Grid-Item?可以围绕网格项流动内容吗？
【发布时间】：2017-09-17 15:12:06
【问题描述】：

我正在使用新的 CSS 网格布局模块来布局一些内容。有几个 8 列宽的段落，我想在 1-3 列中添加一个 3 列宽的 figure，并让它后面的段落流入 figure 右侧的空间.

这可能吗？在非网格世界中，我只需将float:left; 添加到figure。这是我想模仿的行为。

我不知道figure 后面的段落会有多长，所以我不能只说“接下来的 X 段占据第 4-8 列。”

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

【问题讨论】：

请发布您尝试过的代码。如果我们可以重现问题，我们可以更有效地帮助您。
@Michael_B 刚刚添加了一个精简代码笔的链接。

标签： html css css-grid

【解决方案1】：

你想在无花果周围流动的文字。进入一个 div 然后流图。

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

使用这个 CSS

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

【讨论】：

这有点用 - 这可能是最好的答案 - 但我的最终目标是让文字一旦低于数字的水平，也低于它，所以数字被包围文本。

【解决方案2】：

根据CSS Grid Specification float 对网格项目没有影响，所以我认为没有什么好方法可以实现这一点。

Keshav 的回答是最好的方法，所以在 figure 旁边的短段落并不意味着下一段将低于 figure。

如果我们可以确定紧跟在该图后面的段落足够长以通过该图，我们可以使用 CSS 执行类似的操作：

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

但它并不能防止紧跟在figure 之后的段落和紧随其后的段落之间存在间隙，并且这两种解决方案都不允许文本在figure 的正下方流动。

【讨论】：