Question

我有以下内容：

<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）。我期望的是将右侧列固定在右侧边距。我究竟做错了什么？

在这种情况下，浏览器如何计算总宽度？

Answer 1

所以，正在发生的事情是您给网格100vw，这意味着它是视口宽度的100％，对吗？好吧，默认情况下，主体周围有边距，因此，您的网格将为100vw，但由于主体中有边距，因此网格似乎不在屏幕上。

因此，您需要做的就是重置布局：

*{
  margin:0;
  padding: 0;
}

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

您可能会遵循我创建的Codepen的内容： https://codepen.io/pedro-figueiredo/pen/EBaGOg

Answer 2

尝试一下

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

请参考this进行响应式设计

如何停止CSS网格宽度超出屏幕宽度，浏览器如何计算CSS网格宽度？

2 个答案: