代码之家  ›  专栏  ›  技术社区  ›  Eaten by a Grue kackleyjm

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

  •  -1
  • Eaten by a Grue kackleyjm  · 技术社区  · 6 年前

    我有一个布局,左边有一个图像,右边有一些文本内容。布局如下:

    .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像素 但必须始终为右边的文本内容保留至少150px。文本内容将占据尽可能多的空间-这将始终是至少150像素的图像左。

    我的目标是使用CSS网格重新创建这个,但是我对如何使用CSS网格感到困惑 grid-template-columns 得到同样的行为。目前我有这样的想法:

    .wrapper {
      display: grid;
      grid-template-columns: auto minmax(150px, auto);
    }
    
    img {
      width: 300px;
      max-width: 100%;
    }
    <div class=“包装器”>
    <div class=“left”><img src=”https://i.stack.imgur.com/W6Sd8.png“/></div>
    <div class=“right”>你好,我是凯特</div>
    </div>

    这与右边列的最小值150px有关,但不会展开以满足图像的要求。如何使网格布局的行为与第一个示例中的浮动相同?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Roland    6 年前

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

    fr 单位将占用剩下的空间。

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

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

    阿尔索 grid-template-columns: 200px 1fr ,将转换为persentages grid-template-columns: 200px calc(100% - 200px)

    你可以把fr单元看作是自由空间,因为它得到了可用的自由空间,并为我们做了一些艰苦的工作。

    Check out awesome css grid video series

    希望这对你有帮助。

    See it in action here