如何使用具有百分比和未知数量的列的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属性。此属性定义显式网格，表示轨道已明确定义。

您可能正在寻找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的一个优点是自动扣除了装订线尺寸（以建立可用空间，这是fr使用的唯一空间）。使用百分比时，您需要使用calc()。

Answer 2

如果您可以为列定义最小宽度值，那么以下代码将是建立等宽列而不会发生溢出的好方法。我在这里定义了100px的值，但是当然，您可以根据需要更改该值。浏览器将尝试通过将宽度缩小到最小宽度来将所有列排成一行。如果有溢出，它将把剩余的列放在第二行。但是无论如何，列的宽度是相同的。

`

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

`