CSS网格中的漂浮元素

Question

我目前在我的第一页上工作，我想使用CSS网格display: grid。

它运行良好，但是我遇到了一个小问题，其中一个我想要float经典的元素 - 文字在图像，报价等上漂浮。

我只是给了一个元素float: left，令我惊讶的是，float被完全忽略了。该元素仍然是完整的"网格行列"。

简短代码示例：

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

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

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

Answer 2

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

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

Answer 3

浮子在网格容器上被尊重，但在网格项目上被完全忽略了。

在本节中的CSS网格规范中定义了此行为：

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

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

• 文本不包装在CSS网格中

Answer 4

有可能获得所需的效果，但确实涉及一些额外的标记。由于网格仅影响直接的子元素，因此您可以放置要浮动的内容(图像，blockquote等(和要流入其围绕它的单独的div嵌套在容器中的单独的div的文本：应用网格。

例如：

<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$96,500.</p>
    </div>
</div>

使用此CSS运行良好。

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