响应式网站开发遇栅格断点异常、footer无法固定底部问题求助

问题1：Grid栅格异常断点修复 #

出现异常断点的核心原因：

• 写了无效的grid: 20px属性，属于Grid简写属性的错误用法，会干扰栅格行列规则计算
• 栅格容器设置了固定高度height: 50vh，子元素溢出容器后布局错位
• minmax(350px, 1fr)的最小宽度设置偏大，当屏幕宽度在700px~1070px区间时，一行只能放下2个栅格项，第三个掉行就会出现异常效果

修复代码：

/* 全局统一盒模型，避免尺寸计算偏差 */
* {
  box-sizing: border-box;
}
.grid-wrapper{
    display: grid;
    gap: 10px; 
    /* 可根据需求调整最小宽度，适配更多屏幕 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-items: center;
    justify-content: space-around;
}

.caixasInformativas{
    height: 310px;
    width: 310px;
    background-color: violet;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

问题2：Footer固定在页面底部修复 #

position: fixed是相对于视口固定，所以内容超过一屏时会挡住下方内容，用Flex布局实现Sticky Footer效果即可，不需要固定定位：

body
{
margin: 0 auto;
background-color: black;
/* 把固定高度改成最小高度，内容超出时body会自动拉伸 */
min-height: 100vh;
padding: 0;
/* 新增flex布局 */
display: flex;
flex-direction: column;
}

/* 新增：让栅格容器占满剩余空间，把footer挤到最底部 */
.grid-wrapper {
  flex: 1;
}

footer{
    width: 100%;
    background-color: red;
    color: yellow;
    text-align: center;
    padding: 10px 0;
}

内容的提问来源于stack exchange，提问作者Joao Victor