所以我为一个虚构的公司创建了一个简单的登陆页面，以便我可以试用css-grid，并且我已经尝试使网站响应。首先我尝试没有媒体查询，但后来我认为媒体查询是必要的。问题是，每当我调整大小时，浏览器上的一切看起来都很好。一切都适合这么说。但是，当我从手机访问该网站时，它有点放大。当您在devtools中尝试该网站并选择不同的设备来尝试该网站时，可以看到相同的情况。
我认为这个问题可以通过添加<meta name="viewport" content="width=device-width, initial-scale=1.0">标签来解决。但它没有解决问题。
看起来您的网站达到了最小宽度。我在计算机上的浏览器中打开它并调整窗口大小，标题中的文字似乎在页面越来越小时正确包装。但是，当窗口太小时，它们会停止包装。我怀疑这可能是由最小宽度引起的。
看看你的repo中的css代码，看起来你的grid-template-columns可能是最小宽度的原因。也许这一行：
grid-template-columns: repeat(3, minmax(150px, 300px));
特别是，为了在移动设备上查看网站，我建议在页面中一直使用一列。很难将多列彼此相邻放置在移动设备上，例如纵向移动设备，而不会使每个列变得“过于挤压”。
在.articles-container的CSS中，你有grid-template-columns: repeat(3, minmax(150px, 300px));这一行。
这是将最小网格列宽度设置为150px。在移动屏幕上，这将是3 x 150px，因此将比屏幕宽度宽。