CSS 网格中的浮动元素

Question

我目前正在处理第一页，我想在其中使用 CSS 网格 display: grid。

它工作得很好，但我遇到了一个小问题，我想要 float 经典元素 - 文本漂浮在图像、引语等周围

我只是给了一个元素 float: left ，令我惊讶的是， float 被完全忽略了。该元素保持完整 "grid-row-item".

短代码示例：

main {
  display: grid;
  grid-template-columns: 5% 5% 1fr 5% 5%;
}

main > * {
  grid-column: 3;
}

blockquote {
  grid-column: 2 / -2;
}

blockquote.float-left {
  grid-column: 3;
  float: left;
}

对于更大的示例，我创建了一个 Codepen。

不幸的是，我还没有找到任何相关信息，所以我的问题是：有人对此有解决方案吗？我忽略了什么吗？或许这还不可能？

提前致谢！ :)

Codepen-Link:

https://codepen.io/anon/pen/GQWPWX

Answer 1

您不能浮动网格项目。这样做会完全干扰网格布局。

如果要浮动元素，请将它们从网格布局中移除，将 display: grid 分配给其他中间元素，或者不使用网格布局。

Answer 2

浮动在网格容器上受到尊重，但在网格项上完全被忽略。

此行为在本部分的 CSS 网格规范中定义：

https://www.w3.org/TR/css-grid-1/#grid-containers

这里已经讨论过这个问题，但是还没有解决方案：

Text not wrapping in CSS Grid

Answer 3

获得您想要的效果是有可能的，但这确实涉及到额外加价。由于网格只影响直接的子元素，您可以将您想要浮动的内容（图像、块引用等）和您想要围绕它流动的文本放入一个单独的 div 嵌套在 display:grid 的容器中已应用。

例如：

<div class="playerinfo">
    <div class="content">
        <img class="floatleft" src="images/kane-williamson-sml.jpg" alt="Kane Williamson">
        <p> Kane Stuart Williamson (born 8 August 1990) is a professional cricketer from New Zealand who currently plays as a batsman for Northern Districts in New Zealand domestic cricket, the Sunrisers Hyderabad in theIPL, and New Zealand internationally. He made his first-class debut in December 2007 and his IPL debut in 2015.[1] He made his U-19 debut against the touring Indian U-19 team in 2007 and was named captain of the New Zealand U-19 team for the 2008 U-19 Cricket World Cup. Williamson also represented New Zealand at the ICC Cricket World Cup 2011 hosted by Subcontinental nations and the ICC Cricket World Cup 2015 hosted by New Zealand and Australia. On 14 August 2013, Williamson signed for Yorkshire for the rest of the English county season. On February 16 2015, Sunrisers Hyderabad signed Williamson in the IPL for US,500.</p>
    </div>
</div>

使用这个 CSS 效果很好。

.playerinfo{
    display: grid;
}
    
.floatleft {
    float: left;
    padding-right: 5px;
    padding-bottom: 1px;
}

Answer 4

实际上有一个解决方案，使用：

float: left; in grid works as => justify-self: start;
float: right; in grid works as => justify-self: end;

CSS 网格中的浮动元素

Floating elements in CSS Grid

css

css-float

css-grid