代码之家 › 专栏 › 技术社区 › qadenza

不调整网格大小的网格列间隙[复制]

css html

qadenza · 技术社区 · 5 年前

.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),即不调整网格大小?

2 回复 | 直到 5 年前

Loi Nguyen Huynh 5 年前

因为你用 % 定义 grid-template-columns ,同时 20% + 60% + 20% 已经是 100% . 所以如果有 gap ,和 网格内容 的宽度加起来将大于 网格本身 ,这会发生 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>

Rainbow 5 年前

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>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前