求助：海报制作中Grid系统无法全屏显示的解决方法

我的作业是制作一张海报，计划采用Grid系统实现布局。我已完成Grid搭建，但无法达到预期的全屏显示效果，尝试调整width和height属性未解决问题。

问题截图：

我的HTML和CSS代码如下：

CSS代码 #

* {
    margin: 0;
    padding: 0;
}

.grid_section {
    
}

.grid_section .grid_container {
    display: inline-grid;
    background-color: black;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: auto auto auto auto auto; 
    column-gap: 5px;
    row-gap: 5px;
    padding: 10px;
}

.grid_section .grid_container .grid_item {
    background-color: rgb(29, 216, 29);
    border: 1px solid rgb(0, 0, 0);
    padding: 20px;
}

HTML代码 #

<div class="grid_section">
    <div class="grid_container">
        <div class="grid_item"></div>
        <div class="grid_item"></div>
        <div class="grid_item"></div>
        <div class="grid_item"></div>
        <div class="grid_item"></div>
        <div class="grid_item"></div>
        <div class="grid_item"></div>
        <div class="grid_item"></div>
        <div class="grid_item"></div>
        <div class="grid_item"></div>
    </div>
</div>

你的Grid布局无法全屏的核心问题有两个：

1. inline-grid会让容器仅包裹内容宽度，而非占满父容器
2. 未给根元素（html/body）及Grid相关容器设置全屏尺寸

修改后的CSS代码如下：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 防止padding撑大容器 */
}

/* 让根元素占满整个视口 */
html, body {
    width: 100%;
    height: 100%;
}

.grid_section {
    width: 100%;
    height: 100%;
}

.grid_section .grid_container {
    display: grid; /* 替换inline-grid为grid，让容器默认占满父元素宽度 */
    width: 100%;
    height: 100%;
    background-color: black;
    grid-template-columns: repeat(5, 1fr); /* 用1fr均分宽度，auto会根据内容调整 */
    grid-template-rows: repeat(5, 1fr); /* 用1fr均分高度 */
    column-gap: 5px;
    row-gap: 5px;
    padding: 10px;
}

.grid_section .grid_container .grid_item {
    background-color: rgb(29, 216, 29);
    border: 1px solid rgb(0, 0, 0);
}

关键修改说明 #

• 设置html和body的宽高为100%，确保页面根容器占满视口
• 将display: inline-grid改为display: grid，使Grid容器默认撑满父元素宽度
• 给grid_section和grid_container设置100%宽高，继承全屏尺寸
• 使用repeat(5, 1fr)替代多个auto，让每列每行均分可用空间，实现全屏适配
• 添加box-sizing: border-box，避免padding和border导致容器尺寸超出预期

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