CSS Grid背景无法填充整个网格单元问题求助

问题根源 #

1. 背景色样式错误应用在<svg>元素上，而非网格项的容器（.howto、.play等div），SVG仅占图标尺寸，导致背景只覆盖图标区域。
2. 网格项容器默认以内容高度渲染，未占满网格单元的全部空间。

修复方案 #

步骤1：调整样式归属 #

将背景色、flex居中布局等样式从SVG的class（.bi-info-circle-fill等）转移到对应的网格项容器class（.howto、.play、.lightmode、.donate）上。

步骤2：确保容器占满网格单元 #

利用CSS Grid默认的align-items: stretch属性（或显式设置），让网格项容器自动填充网格单元的高度，无需额外设置height: 100%（若有冲突可添加）。

修改后的完整代码 #

CSS部分

body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
  background-color: #ff9900;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #000000;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #ff9900;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #fbc67d;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
    display: grid;
    grid-template-columns: 15fr repeat(4, 1fr) 15fr;
    grid-template-rows: 1fr 6fr;
    gap: 0; /* 合并grid-column-gap和grid-row-gap为gap */
    align-items: stretch; /* 显式设置，确保网格项填充单元高度 */
}

.body { 
    grid-area: 2 / 1 / 3 / 7; 
}

/* 为网格项容器添加样式 */
.howto, .play, .lightmode, .donate {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #976825;
    transition: 0.3s;
}

.howto:hover, .play:hover, .lightmode:hover, .donate:hover {
    filter: invert(100%);
}

.textcenter {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fbc67d;
}

.play { 
    grid-area: 1 / 3 / 2 / 4; 
}

.lightmode { 
    grid-area: 1 / 4 / 2 / 5; 
}

.donate { 
    grid-area: 1 / 5 / 2 / 6; 
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

HTML部分（移除SVG上的冗余class）

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>

<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
</div>
    
<div id="main">
    <div class="howto"><span style="cursor:pointer" onclick="openNav()">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
        </svg>
    </div>
    <div class="play">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
        </svg>
    </div>
    <div class="lightmode">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
        </svg>
    </div>
    <div class="donate">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M7.964 1.527c-2.977 0-5.571 1.704-6.32 4.125h-.55A1 1 0 0 0 .11 6.824l.254 1.46a1.5 1.5 0 0 0 1.478 1.243h.263c.3.513.688.978 1.145 1.382l-.729 2.477a.5.5 0 0 0 .48.641h2a.5.5 0 0 0 .471-.332l.482-1.351c.635.173 1.31.267 2.011.267.707 0 1.388-.095 2.028-.272l.543 1.372a.5.5 0 0 0 .465.316h2a.5.5 0 0 0 .478-.645l-.761-2.506C13.81 9.895 14.5 8.559 14.5 7.069c0-.145-.007-.29-.02-.431.261-.11.508-.266.705-.444.315.306.815.306.815-.417 0 .223-.5.223-.461-.026a.95.95 0 0 0 .09-.255.7.7 0 0 0-.202-.645.58.58 0 0 0-.707-.098.735.735 0 0 0-.375.562c-.024.243.082.48.32.654a2.112 2.112 0 0 1-.259.153c-.534-2.664-3.284-4.595-6.442-4.595Zm7.173 3.876a.565.565 0 0 1-.098.21.704.704 0 0 1-.044-.025c-.146-.09-.157-.175-.152-.223a.236.236 0 0 1 .117-.173c.049-.027.08-.021.113.012a.202.202 0 0 1 .064.199Zm-8.999-.65a.5.5 0 1 1-.276-.96A7.613 7.613 0 0 1 7.964 3.5c.763 0 1.497.11 2.18.315a.5.5 0 1 1-.287.958A6.602 6.602 0 0 0 7.964 4.5c-.64 0-1.255.09-1.826.254ZM5 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
        </svg>
    </div>
    <div class="body textcenter">box</div>
</div>

额外优化说明 #

• 将grid-column-gap和grid-row-gap合并为更简洁的gap属性。
• 把hover效果统一到网格项容器上，减少重复代码。

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