css - 如何使用具有百分比和未知数量列的 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;
}

这似乎是实现我想要的东西的一种非常 hacky 的方式。

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

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

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

Answer 1

因为您不知道列数，所以不使用 grid-template-columns 属性(property)。此属性定义了一个显式网格，这意味着轨道是显式定义的。

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

试试这个:

grid-auto-columns: 1fr

随着 fr单位，仅分配自由空间。这将是考虑到排水沟后留下的空间。

7.2.3. Flexible Lengths: the fr unit

A flexible length or <flex> is a dimension with the fr unit, which represents a fraction of the free space in the grid container.

free space

Equal to the available grid space minus the sum of the base sizes of all the grid tracks (including gutters), floored at zero. If available grid space is indefinite, the free space is indefinite as well.

此外 – 当您确实有定义的列数 – 因为我们处理的是比例，您可以匹配 fr值到您想要的百分比。像这样:

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

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