css - 如何使用 css 网格重新创建 float 布局？

Question

我有一个布局，左侧是图像，右侧是一些文本内容。它的布局是这样的:

.left {
  max-width: calc(100% - 150px);
  float: left;
}

img {
  width: 300px;
  max-width: 100%;
}

<div class="wrapper">
  <div class="left"><img src="/image/W6Sd8.png" /></div>
  <div class="right">Hello, I am Kitteh</div>
</div>

基本思路是图像可以最大 300 像素，但必须始终为右侧的文本内容留出至少 150 像素。文本内容将填满尽可能多的空间 - 图像始终至少留出 150 像素。

我的目标是使用 CSS 网格重新创建它，但我对如何使用 grid-template-columns 获得相同的行为感到困惑。目前我有这样的事情:

.wrapper {
  display: grid;
  grid-template-columns: auto minmax(150px, auto);
}

img {
  width: 300px;
  max-width: 100%;
}

<div class="wrapper">
  <div class="left"><img src="/image/W6Sd8.png" /></div>
  <div class="right">Hello, I am Kitteh</div>
</div>

这符合右侧列的最小 150 像素，但不会扩展以符合图像。如何让网格布局的行为与第一个示例中的 float 相同？

Answer 1

代替 minmax(150px, auto); 添加 minmax(150px, 1fr)

fr 单元将占用剩余的空间。

fr 单位类似于百分比(%)。但他们为我们做了艰苦的工作。例如，如果你想要 4 列相同的大小，你可以做 25% 25% 25% 25%。这类似于 1fr 1fr 1fr 1fr。

但是如果您有 grid-gap: 20px，您会注意到如果您使用百分比，则会出现一个滚动条。幸运的是 fr unit 会处理这个并且不会出现滚动。

还有 grid-template-columns: 200px 1fr, 转换成百分比将是 grid-template-columns: 200px calc(100% - 200px) 所以 fr 单元再次为我们做了艰苦的工作。

您可以将 fr 单元视为可用空间，因为它正在获取可用的可用空间并为我们做一些艰苦的工作。

够不够？ Check out awesome css grid video series

希望对您有所帮助。

See it in action here