如何使用 css 网格重新创建浮动布局？

Question

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

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

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

<div class="wrapper">
  <div class="left"><img src="https://i.stack.imgur.com/W6Sd8.png" /></div>
  <div class="right">Hello, I am Kitteh</div>
</div>

基本思路是图像可以最大 300 像素，但必须始终为右侧的文本内容留出至少 150 像素。文本内容将尽可能多地填满 space - 图像始终至少留出 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="https://i.stack.imgur.com/W6Sd8.png" /></div>
  <div class="right">Hello, I am Kitteh</div>
</div>

这符合右侧栏 150 像素的最小值，但不会展开以适应图像。如何让网格布局的行为与第一个示例中的浮动相同？

Answer 1

而不是 minmax(150px, auto); 添加 minmax(150px, 1fr)

fr 单位将占用剩余的 space。

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 单元是免费的 space，因为它正在免费提供 space 并为我们做一些艰苦的工作。

能吃饱吗？ Check out awesome css grid video series

希望对您有所帮助。

See it in action here

如何使用 css 网格重新创建浮动布局？

How to recreate float layout using css grid?

css

css-float

css-grid