使宽度为 1fr + 1fr = 2fr（有网格间隙）

Posted 2023-03-07

【中文标题】使宽度为 1fr + 1fr = 2fr（有网格间隙）

【英文标题】：Make the width of 1fr + 1fr = 2fr (with grid gap)

【发布时间】：2018-05-26 07:29:03

【问题描述】：

让我的前两列总宽度与我的第三列相同的正确方法是什么？如果我这样拆分它们：

.grid 
    display:grid;
    grid-template-columns:1fr 1fr 2fr;
    grid-gap:2em;

<div class="grid">
    <div class="small">Col 1</div>
    <div class="small">Col 2</div>
    <div class="large">Col 3</div>
</div>

此处示例：https://codepen.io/shorty2240/pen/baGYoW

我假设我可以在这个下方创建另一个网格，具有相同的网格间隙和 1fr 1fr，它会对齐，但显然不会。

如果可能的话，我想避免嵌套前两项，因为实际项目会自动输出这三项，而环绕前两项可能会有问题。

【问题讨论】：

fr 涉及 剩余 空间 任何间隙。在这种情况下，您可能需要嵌套。

其他任何方法如 flex 都可以吗？或者你想要网格系统

@TemaniAfif 我想我可以用 flex 解决这个问题，但希望能发挥网格的优势！

【参考方案1】：

您应该将网格设置为 4 列宽，并定义您的 .large 以使用 2 列。

这实际上与流行的 css 框架（如 bootstrap 和 Foundation）中的列的工作方式一致。

grid-template-columns:1fr 1fr 1fr 1fr;

.large 
  grid-column-start: 3;
  grid-column-end: 5;

或者对设置 4 列和网格列使用任何简写语法。

【讨论】：

太棒了，这就是我需要的答案。我为什么需要它以及它如何在这里提供帮助的示例：codepen.io/shorty2240/pen/rpNpNb

你可以做小grid-template-columns: repeat(4, 1fr);

有很多带有网格的选项。 @Paulie_D 很好地提到了 span 关键字和中继器。您可以在这里使用的另一个不错的功能是grid-template-areas。在我的回答中，我选择了（自以为是的）最容易阅读和理解的版本。

【参考方案2】：

正如@Rene 所提到的，定义了 4 列，但告诉 .large div 跨越 2 列，而 .small 只有一列。

.grid 
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;


.grid div 
  background: grey;
  height: 75px; /* for demo purposes */


.small 
  grid-column: span 1;


.large 
  grid-column: span 2;

<div class="grid">
  <div class="small">Col 1</div>
  <div class="small">Col 2</div>
  <div class="large">Col 3</div>
  <div class="large">Col 4</div>
  <div class="large">Col 5</div>
</div>

【讨论】：

您应该使用grid-auto-rows: minmax(75px, auto); 代替height 来获得动态大小

高度仅用于演示目的。