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>

基本思想是图像可以最大为300px ，但必须始终在右侧保留至少150px的文本内容。文本内容将填充尽可能多的空间-图像始终至少留有150px。

我的目标是使用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>

这会尊重右侧列的最小值150px，但不会扩展到符合图像的大小。如何使网格布局的行为与第一个示例中的浮动元素相同？

Answer 1

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

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

fr单位就像百分比（％）。但是他们为我们做了艰苦的工作。例如，如果您希望4列大小相同，则可以执行25％25％25％25％。类似于1fr 1fr 1fr 1fr。

但是，如果您有grid-gap: 20px，则使用劝导会看到滚动条。幸运的是，fr单位会解决这个问题，并且不会出现滚动。

也grid-template-columns: 200px 1fr，要转化为礼物 grid-template-columns: 200px calc(100% - 200px)，因此fr unit再次为我们做艰苦的工作。

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

能得到足够的吗？ Check out awesome css grid video series

希望这会对您有所帮助。

See it in action here

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

1 个答案: