Html 为什么网格在小屏幕上的行为是这样的？_Html_Css_Css Grid

Html 为什么网格在小屏幕上的行为是这样的？

html css

Html 为什么网格在小屏幕上的行为是这样的？,html,css,css-grid,Html,Css,Css Grid,网格的代码是 .container { display: grid; grid-template-columns: 1fr; margin:1% 1% 1% 1%; border-radius: 15px; background-color: rgb(75, 75, 74); box-shadow: 0px 0px 15px 2px rgb(41, 40, 40); border: 2px solid rgb(0, 255, 0);

网格的代码是

.container {
    display: grid;
    grid-template-columns: 1fr;
    margin:1% 1% 1% 1%;
    border-radius: 15px;
    background-color: rgb(75, 75, 74);
    box-shadow: 0px 0px 15px 2px rgb(41, 40, 40);
    border: 2px solid rgb(0, 255, 0);  

}

屏幕尺寸约为370 x 676后，网格宽度变得太小，并向左对齐。

屏幕越大，网格越大

为什么网格的行为是这样的

编辑：完整代码以获得更多解释。容器类是一个由一列组成的网格，我希望它有一个像卡片一样的大外观。在测试了更小的屏幕尺寸后，网格似乎在右侧增加了很多余量

即使存在媒体查询，也会发生错误。（以代码注释）

*{
边际：0px；
填充：0px；
框大小：边框框；
}
身体{
字体系列：“Ubuntu”，无衬线；
背景色：rgb（92,87,87）；
颜色：白色；
背景图像：重复线性梯度（33度，rgb（247，204，36）0%7%，rgb（233，192，30）7%9%）；
}
.集装箱{
显示：网格；
网格模板列：重复（自动拟合，最小值（500px，1fr））；
利润率：1%1%1%1%；
边界半径：15px；
背景色：rgb（75,75,74）；
盒影：0px 0px 15px 2px rgb（41,40,40）；
边框：2倍实心rgb（0,255,0）；
}
.导航包装器{
显示器：flex；
文本转换：大写；
证明内容：之间的空间；
填充：1%；
对齐项目：居中；
字体大小：13px；
字号：600；
颜色：rgb（255、255、255）；
}
.导航左{
显示器：flex；
}
.导航链路{
列表样式：无；
右边距：40px；
}
.导航左a{
文字装饰：无；
颜色：白色；
}
.投资组合主卡{
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
边框：2倍纯黄色；
背景色：rgb（134107134）；
宽度：100%；
高度：50vh；
}
.我的形象{
弹性：1；
身高：100%；
}
.我的形象{
身高：100%；
对象匹配：包含；
宽度：100%；
}
.我的文本{
显示器：flex；
弹性：1；
证明内容：中心；
}
.my-text-p{
字号：0.9em；
字号：600；
}
.公文包卡片包装{
显示：网格；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
网格自动行：自动；
利润率：30px 30px 60px 30px；
}
.卡片{
边界半径：3px；
填充：0.5雷姆；
背景色：rgb（66,62,62）；
颜色：#feda6a；
盒影：0px 0px 16px rgb（0,0,0）；
利润率：20px 20px 10px 20px；
}
.项目{
利润率：20px；
}
.projects>p{
文本对齐：居中；
字号：600；
}
/*@介质（最大宽度：600px）{
.集装箱{
背景色：rgb（255、255、255）；
网格模板列：1fr；
}
.投资组合主卡{
显示器：flex；
弯曲方向：立柱；
背景色：红色；
}
.公文包卡片包装{
显示：网格；
网格模板列：1fr；
}
}*/


你好，世界



名字
欢迎来到我的作品集
计划
机器学习
查看详细信息
计算机视觉
wow
python
我的python项目如下
最后一年项目
我的最后一年项目

因为您需要添加媒体查询来明确告诉网格在小屏幕上的行为方式

尝试添加网格模板列：重复（自动拟合，最小值（500px，1fr））；到css中的.container。我得到了以下结果：

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); 
    margin:1% 1% 1% 1%;
    border-radius: 15px;
    background-color: rgb(75, 75, 74);
    box-shadow: 0px 0px 15px 2px rgb(41, 40, 40);
    border: 2px solid rgb(0, 255, 0);  

}

使用此html代码：

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Portfolio</h1>
<h2>Home</h2>
<h3>About</h3>
<div class="containter">
<img src= "ente.jpg" style="width:400px;" >
</div>
<div class="container">

<div style="border: 2px solid rgb(0, 255, 0)";><p>My Python Projects</p></div>
<div style="border: 2px solid rgb(0, 255, 0)";><p>My HTML Project</p></div>
<div style="border: 2px solid rgb(0, 255, 0)";><p>My Winter Project</p></div>
<div style="border: 2px solid rgb(0, 255, 0)";><p>Thats me! </p></div>
</div>

</body>
</html>


文件夹
家
关于
我的Python项目
我的HTML项目
我的冬季计划
那是我

。。当最小化屏幕尺寸时，如果div的大小降到500px以上，容器将进行水平中断

桌面视图中的结果是：

在回应方面：

这并不能解决问题。我用于设计这样的小卡片的网格效果很好。但容器的工作方式与我预期的不同。我添加了大小小于600px的媒体查询。它在400px或其他地方都可以正常工作，在这之后，它的行为就像解释中所示。为小于400px的尺寸添加另一个，但在这种情况下，您必须重新设计组件，使其适合。顺便问一下，谁会在400px或更小的屏幕上使用你的应用程序？我想你可以保持原样