为何使用Grid布局的HTML代码仅显示粉色区块？需实现Mobile First响应式设计

1. 媒体查询样式无作用对象：你写的@media块里直接放置了grid-template-columns等Grid属性，但未指定这些样式的作用元素（缺少body选择器），导致大屏下的Grid布局规则完全不生效。
2. 移动基础布局缺失：Mobile First要求先定义小屏幕的默认样式，但你仅给body设置了display: grid，未配置行/列规则，空的区块div默认高度为0，自然无法展示——粉色区块能显示大概率是浏览器偶然的渲染差异，不属于正常逻辑。
3. Grid区域未关联容器：即使修复媒体查询，小屏幕下也未给各个区块分配Grid区域，无法保证基础展示效果。

直接修改CSS部分，先定义小屏幕的垂直堆叠布局，再通过媒体查询适配大屏：

body, html{
    height: 100%;
    margin: 0; /* 消除浏览器默认边距，避免滚动条 */
    display: grid;
    /* 移动优先：小屏幕下垂直堆叠，每个区块均分页面高度 */
    grid-template-rows: repeat(4, 1fr);
    gap: 8px; /* 可选：给区块添加间距，提升视觉效果 */
}

/* 大屏适配（>=900px） */
@media screen and (min-width: 900px) {
    body {
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-rows: 1fr 2fr;
        grid-template-areas:
            "red red red"
            "green blue pink";
    }
}

.redArea { grid-area: red; }
.greenArea{ grid-area: green; }
.blueArea { grid-area: blue; }
.pinkArea { grid-area: pink; }

• 新增margin: 0消除浏览器默认边距，避免页面出现不必要的滚动条。
• 移动优先核心：先配置小屏幕的grid-template-rows: repeat(4, 1fr)，让四个区块垂直均分页面高度，确保小屏幕下所有区块都能正常显示。
• 媒体查询内添加body选择器，让大屏的Grid布局规则正确作用到容器上，实现red占满第一行、green/blue/pink分占第二行的布局。
• 可选的gap属性用于给区块添加间距，不需要可直接删除。

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