如何停止 css 网格宽度超出屏幕宽度，以及浏览器如何计算 css-grid 宽度？ [复制]答案

【问题标题】：How do I stop css grid width extending beyond screen width, and how do browsers calculate css-grid width? [duplicate]如何停止 css 网格宽度超出屏幕宽度，以及浏览器如何计算 css-grid 宽度？ [复制]
【发布时间】：2019-10-26 21:10:18
【问题描述】：

我有以下几点：

<html>
<head>
<style>
  #outer-grid {
    display: grid;
    grid-gap:0vh;
    grid-template-columns: repeat(2, 1fr) 30px;     /*also tried auto in place of 1fr*/
    grid-template-rows: repeat(2,1fr);
    height: 100vh;
    width: 100vw;
    position: absolute;

  }
</style>
</head>
<body>
<div id='outer-grid'>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
</div>
</body>
</html>

这会导致内容超出屏幕宽度，并添加滚动条 (Firefox)。我所期待的是将右侧列固定在右侧边缘。我究竟做错了什么？

这种情况下浏览器如何计算整体宽度？

【问题讨论】：

看看force css grid container to fill full screen of device
您需要绝对位置吗？我删除了它，它工作正常
@Jabberwocky 谢谢，那时可能不会......
删除 position 和 change width: 100vw 到 width: 100% 就可以了
重置边距或添加top:0;left:0 到 positon:absolute 元素

标签： html css css-grid

【解决方案1】：

那么，发生的事情是您给网格设置了 100vw，这意味着它将是视口宽度的 100%，对吧？好吧，默认情况下，body 周围有边距，所以，你的网格将是 100vw，但是因为你在 body 中有边距，所以网格似乎离开了屏幕。

所以，你需要做的是重置布局：

*{
  margin:0;
  padding: 0;
}

然后，只需在网格元素中应用所需的边距和填充。

您可能会按照我创建的 codepen 的思路进行操作： https://codepen.io/pedro-figueiredo/pen/EBaGOg

【讨论】：

【解决方案2】：

试试这个

<meta name="viewport" content="width=device-width, initial-scale=1.0">

响应式设计请参考this

【讨论】：

谢谢你，可惜这对我不起作用。
为什么会发生这种情况
同样的事情（添加了滚动条，内容超出了宽度）。它对你有用吗？
我不使用 Firefox，但响应式设计应该可以工作。我在 chrome 中尝试过响应式设计