CSS Grid 中的浮动元素

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 链接：

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

原文由 Max 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 BoltClock 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 Arvis Iljins 发布，翻译遵循 CC BY-SA 4.0 许可协议