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

Question

这是我试图实现的布局：

我目前正在这样做：

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)。

如果没有hackycalc()FR方式，我将如何实现这种基于百分比/分形的布局？

Answer 1

由于您不知道列数，因此不使用该grid-template-columns属性。该属性定义了一个明确的网格，这意味着轨道是明确定义的。

您可能正在寻找grid-auto-columns. 此属性定义自动创建的列的宽度（这将是隐式网格）。

尝试这个：

grid-auto-columns: 1fr

对于该fr单元，仅分配可用空间。这将是考虑到排水沟后留下的空间。

7.2.3. 灵活长度：fr单位

一个灵活的长度或者<flex>是一个带有fr单位的尺寸，它代表了网格容器中自由空间的一部分。

可用空间

等于可用网格空间减去所有网格轨道（包括排水沟）的基本尺寸总和，地板为零。如果可用网格空间是不确定的，那么可用空间也是不确定的。

此外 - 当您确实有定义的列数时 - 由于我们正在处理比例，您可以将fr值与所需的百分比相匹配。像这样的东西：

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

使用fr这里的一个好处是自动扣除装订线大小（以建立可用空间，这是唯一的空间fr使用）。对于百分比，您需要使用calc().