为图片添加<a href>标签后CSS Grid布局失效的问题求助

把原本给<img>设置的网格定位属性，移到对应的<a>标签上，同时调整图片样式确保占满链接容器：

修改后的HTML：

<div class="food-box">
     <h1 id="food-title">FEATURED MENUS</h1>
     <a href="./brunch.html" id="dish-link1"> <img id="dish1" src="./resources/images/ft-food1.png" /></a>
     <h3 id="dish-title1">BRUNCH</h3>                
     <a href='./lunch.html' id="dish-link2"><img id="dish2" src="./resources/images/ft-food1.png" /></a>
     <h3 id="dish-title2">LUNCH</h3>
     <a href="./dinner.html" id="dish-link3"><img id="dish3" src="./resources/images/ft-food1.png" /></a>
     <h3 id="dish-title3">DINNER</h3>
</div>

修改后的CSS：

.food-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    row-gap: 0em;
    color: #262626;
    background-color: #fdfdfd;
    font-family: 'Roboto', sans-serif;
}

#food-title {
    grid-column-start: 2;
    justify-self: center;
}

/* 将Grid定位属性转移到a标签 */
#dish-link1 {
    grid-column-start: 1;
    grid-row-start: 2;
    padding-left: 1em;
}

#dish1 {
    max-width: 20em;
    display: block; /* 消除图片默认行内元素间距 */
}

#dish-title1 {
    grid-column-start: 1;
    padding-left: 1em;
    justify-self: center; /* 替换position:relative+left，更符合Grid布局逻辑 */
}

#dish-link2 {
    grid-column-start: 2;
    grid-row-start: 2;
}

#dish2 {
    max-width: 20em;
    display: block;
}

#dish-title2 {
    grid-column-start: 2;
    grid-row-start: 3;
    justify-self: center;
}

#dish-link3 {
    grid-column-start: 3;
    grid-row-start: 2;
}

#dish3 {
    max-width: 20em;
    display: block;
}

#dish-title3 {
    grid-column-start: 3;
    grid-row-start: 3;
    justify-self: center;
}

方案2：使用display: contents简化修改

给所有.food-box下的<a>标签设置display: contents，这样Grid布局会忽略<a>标签，直接将内部的<img>当作容器的直接子元素，保留你原本给<img>设置的定位样式：

添加到CSS中：

.food-box a {
    display: contents;
}

注意：display: contents兼容所有现代浏览器，但不支持IE浏览器。

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