时间戳

首页 > 解决方案 > 如何使用 CSS 网格重新创建浮动布局？

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

问题描述

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

.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 像素。文本内容将填满尽可能多的空间——图像始终至少留有 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 像素，但不会扩展以满足图像。如何让网格布局的行为与第一个示例中的浮动相同？

标签： csscss-floatcss-grid

解决方案

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

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

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

但是如果你有grid-gap: 20px你会注意到如果你使用 persentages 会出现一个卷轴。幸运的是 fr unit 会处理这个并且不会出现滚动。

此外grid-template-columns: 200px 1fr，转换为 persentages 将 grid-template-columns: 200px calc(100% - 200px)再次如此，fr 单位正在为我们做艰苦的工作。

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

能吃饱吗？查看很棒的 CSS 网格视频系列

希望这会帮助你。

在此处查看实际操作

推荐阅读