当我在移动视图中查看时，为什么网格列不会扩展到整个宽度？答案

【问题标题】：Why won't the grid columns expand to the entire width when I'm viewing this in mobile view?当我在移动视图中查看时，为什么网格列不会扩展到整个宽度？
【发布时间】：2020-03-27 16:48:50
【问题描述】：

我试图弄清楚为什么我不能让这个网格模板扩展和/甚至居中视口。它工作正常，在桌面视图中符合预期...

有什么想法吗？如果您需要更多代码 sn-ps，请告诉我。

.grid-container-columns {

height: 100%;

display: grid;

grid-template-columns: repeat(12, 1fr);

grid-gap: 16px;

align-content: stretch;

}

header#home-section h1 {

grid-column: 3/span 8;

justify-self: center;

align-self: center;

text-align: center;

padding-top: 10rem;

z-index: 1;

}

容器 div 仅提供 1100px 的最大宽度，边距为 0 auto。

感谢您的帮助！

【问题讨论】：

您的网格实际上正在适应屏幕，但有一个元素溢出网格，很可能是标题或“个性化”一词，它根本不适合在屏幕中，您应该尝试处理该特定元素的字体大小，以便它更好地适应，而不是网格

标签： html css css-grid

【解决方案1】：

我想你想删除中间的那些空格？如果是，请更改

grid-gap: 16px;

到

grid-gap: 0;

如果您不使用它，甚至最好将其完全删除。同样要居中，您需要

html, body{
   overflow: hidden;
}

【讨论】：

感谢您的回复！这里有一些更多的上下文：如果你看到上面的图片，在网格的右边有一个巨大的差距 - 不知道这是从哪里来的（检查员甚至没有显示它是什么......）我是网格间隙本身很好。有什么想法吗？
好的，我注意到你的 h1 太大了。它比屏幕大，因此溢出。您是否尝试过溢出：隐藏？这解决了右边的差距。您仍然需要减少字体粗细以使其适合屏幕。
太棒了！这似乎已经解决了它（不知道我怎么会错过它）......现在我只需要弄清楚如何使字体更具响应性。再次感谢！
是的，肯定会避免使用overflow: hidden，只是尝试更好地处理字体大小，因为使用前一个规则可能会导致其他问题:) 这只是一种解决方法，并不是真的解决方案

【解决方案2】：

我不知道你想要什么，但从描述中我了解到你的正文内容不适应移动屏幕。请删除以下 div 类

<div class="grid-container-columns grid-container-two-rows">

只放grid-container 类以及为什么你想要引导容器请提出您的问题，以便人们可以理解您的期望添加额外的描述和代码。

【讨论】：

我正在尝试让容器扩展到移动视口的范围...在网格的右侧有一个巨大的间隙（见上图）。我不确定你对引导容器的评论是什么意思......我没有在这个项目上使用引导程序（我正在创建一个类来帮助稍后在我的项目中创建网格，这是我的偏好，如果这就是你要问的）