网格列间隙而不调整网格大小[重复]答案

【问题标题】：grid column gap without resizing the grid [duplicate]网格列间隙而不调整网格大小[重复]
【发布时间】：2020-04-13 14:17:22
【问题描述】：

.grid{
display:grid;
height:100vh;
grid-template-columns:20% 60% 20%;
grid-column-gap:14px;
}

.grid div{
background:orange;
}

<div class='grid'>
<div class='col'></div>
<div class='col'></div>
<div class='col'></div>
</div>

如何在没有底部滚动条的情况下获得上述列间隙（14px），即不调整网格大小？

【问题讨论】：

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

标签： html css

【解决方案1】：

Grid 和 Flex 应用一个等于内容的最小宽度，在 flex 中，我们可以在 flex 项目上使用 min-width 属性来定位它，但是当涉及到 grid 时，我们不能直接在元素上这样做，因为 grid 建立了列我们将元素放入其中，因此我们需要使用minmax()，因为它在网格级别运行

/* cosmetics */
body * {
  border: 1px solid;
  padding: 10px;
}
/* End cosmetics */


.grid {
  display: grid;
  height: 100vh;
  grid-template-columns: minmax( 0, 20%) minmax( 0, 60%) minmax( 0, 20%);
  grid-column-gap: 14px;
}

.grid div {
  background: orange;
}

<div class='grid'>
  <div class='col'></div>
  <div class='col'></div>
  <div class='col'></div>
</div>

【讨论】：

我们可以像控制弹性项目（stackoverflow.com/a/43312314/8620333）一样控制网格项目上的min-width。
@TemaniAfif 这很奇怪，我试过了，但没有效果
@TemaniAfif 我想我明白了，minmax() 在网格级别运行，这就是调整列大小所需要的。
因为在这种情况下，我们使用百分比值明确设置宽度，因此最小宽度约束不起作用。仅在使用分数单位 (fr) 时才考虑。当涉及到 flex-grow 时，就像 flexbox 一样，但是如果你明确设置 flex 项目的宽度，你不会对 min-width 有任何问题。
相当不错的把戏！

【解决方案2】：

因为你用%定义了grid-template-columns，同时20% + 60% + 20%已经是100%。所以如果有gap，grid content的宽度加起来会比grid本身大，overflow会导致滚动条锯。

解决方案是使用fr unit 而不是%

.grid{
  display:grid;
  height:100vh;
  grid-template-columns:20fr 60fr 20fr;
  /* grid-template-columns:1fr 3fr 1fr; do the same at the above*/ 
  grid-column-gap:14px;
}

.grid div{
  background:orange;
}

<div class='grid'>
  <div class='col'></div>
  <div class='col'></div>
  <div class='col'></div>
</div>

【讨论】：

@qadenza 我误解了这个问题。编辑它，使用fr 而不是%。你需要解释吗？我会在答案上添加解释。
width: 50% 并没有真正解决任何问题，因为它只是降低了宽度，如果你添加边框，你会发现内容仍然溢出，overflow-x: hidden 如果有内容就会被剪掉关闭
对不起，我没仔细看他说的是without resizing the grid
您不应编辑您的答案以包含其他答案的详细信息。你打败了有多个答案的目的，你让其他的看起来像一个复制粘贴
我认为没有人会认为@Zohir Salak 的答案是从我的复制而来，我包括了checkout @Zohir Salak's answer below。有些人有只阅读接受答案的习惯，尤其是当接受的答案已经是正确的答案时。我只是想在我的中包含一个有用的（但带有引用） 信息，以使其更好。无论如何，我会删除它，因为它似乎违反社区目的。