代码之家 › 专栏 › 技术社区 › Dan Gamble

如何使用带有百分比和未知列数的CSS网格?

css-grid css

Dan Gamble · 技术社区 · 7 年前

这就是我试图实现的布局:

我目前正在做这件事:

HTML

<div class="ft-Footer_Columns">
  <div class="ft-Footer_Column ft-Footer_Column-about">
    <h4 class="ft-Footer_Title">Title 1</h4>

    <p class="ft-Footer_Text">Text 1</p>
  </div>

  <div class="ft-Footer_Column ft-Footer_Column-links">
    <h4 class="ft-Footer_Title">Title 2</h4>

    <p class="ft-Footer_Text">Text 2</p>
  </div>

  <div class="ft-Footer_Column ft-Footer_Column-contact">
    <h4 class="ft-Footer_Title">Title 3</h4>

    <p class="ft-Footer_Text">Text 3</p>
  </div>
</div>

CSS

.ft-Footer_Columns {    
  display: grid;
  grid-column-gap: calc(20px * 2);
  grid-template-columns: calc(5 / 12)fr calc(4 / 12)fr calc(3 / 12)fr;
}

这似乎是一个相当黑客的方式来实现我想要的。

理想情况下,我希望能够做到:

.ft-Footer_Columns {    
  display: grid;
  grid-column-gap: calc(20px * 2);
  grid-template-columns: calc(5 / 12 * 100%) calc(4 / 12 * 100%) calc(3 / 12 * 100%);
}

但目前确实如此 100% + ((20px * 2) * 2) .

如果没有黑客,我如何实现这种基于百分比/分形的布局 calc()FR 方法

2 回复 | 直到 6 年前

Michael Benjamin William Falcon 6 年前

因为您不知道列的数量,所以不使用 grid-template-columns 所有物此属性定义 明确的 网格,这意味着轨迹是明确定义的。

你可能正在寻找 grid-auto-columns . 此属性定义自动创建的列的宽度(这将是 含蓄的

试试这个:

grid-auto-columns: 1fr

和 fr 单位,仅分布自由空间。这将是水槽考虑在内后剩下的空间。

7.2.3. Flexible Lengths: the fr unit

灵活的长度或 <flex> 是具有 fr公司 单位,表示 可用空间 在网格容器中。

free space

等于可用网格空间减去所有网格轨道(包括排水沟)的地板均为零。如果可用网格空间是不确定的,自由空间也是不确定的。

此外,当你有一个定义的列数时,因为我们处理的是比例,你可以匹配 fr公司 将值设置为所需的百分比。类似这样:

grid-template-columns: 42fr 33fr 25fr (instead of 42% 33% 25%).

使用的一个优点此处自动扣除檐沟尺寸(以建立自由空间,这是唯一的空间 fr公司 使用)。对于百分比,您需要使用 calc() .

Alper OZBEK 5 年前

如果可以为列定义最小宽度值,那么下面的代码将是一个很好的解决方案,可以在不溢出的情况下建立等宽列。我在这里定义了100px的值,但当然,您可以根据需要更改该值。浏览器将通过将宽度缩小到最小宽度来尝试将所有列放在一行中。如果有溢出,它将把剩余列放在第二行。但是这些列的宽度无论如何都是一样的。

.ft-Footer_Columns {
    display: grid;
    grid-column-gap:20px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}