如何使用Grid实现页脚三个Div与头部三张图片的对齐居中？

我们统一采用Grid布局实现头部图片与页脚模块的对齐居中，让两者布局逻辑一致，精准匹配对齐效果。

1. 头部布局调整（改用Grid） #

将原本的Flex布局替换为Grid，精准控制列分布，和页脚列实现对应：

修改后的HTML #

<section id="main-headergrid">
    <img src="images/image1.jpg" alt="image1">
    <img src="images/image2" alt="image2">
    <img src="images/image3.png" alt="image3">
</section>

修改后的CSS #

.container > #main-headergrid {
    display: grid;
    /* 分成3等宽列，与页脚3个模块一一对应 */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* 可选：给图片间增加间距 */
    align-items: center;
    max-width: 1200px; /* 与页脚设为相同最大宽度，保证对齐 */
    margin: 0 auto; /* 让头部整体在页面居中 */
}

#main-headergrid img {
    width: 100%; /* 图片自适应列宽 */
    height: auto;
}

2. 页脚布局调整（改用Grid并对齐头部） #

移除原Flex布局的固定padding，改用Grid实现与头部的精准对齐：

修改后的HTML #

<section id="main-footer"> 
    <hr>
    <div class="icon-group"> <!-- 新增容器包裹模块，方便Grid控制 -->
        <div class="icon-item"> <!-- 统一类名，减少重复代码 -->
            <img src="images/icon1.png" alt="icon1" width="150" height="125">
            <h1> icon1 </h1>
            <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
        </div>
        <div class="icon-item">
            <img src="images/icon2.png" alt="icon2" width="150" height="125">
            <h1> icon2 </h1>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
        </div>
        <div class="icon-item"> 
            <img src="images/icon3.png" alt="icon3" width="150" height="125">
            <h1> icon3 </h1> 
            <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p> 
        </div>
    </div>
</section>

修改后的CSS #

#main-footer {
    background-color: var(--grey);
    padding: 20px 0; /* 用上下padding替代固定height，内容自适应高度 */
}

#main-footer .icon-group {
    display: grid;
    /* 和头部一致的3等宽列，保证对齐 */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
    max-width: 1200px; /* 与头部max-width保持一致，实现整体对齐 */
    margin: 0 auto; /* 让页脚模块整体在页面居中 */
    padding: 0 20px; /* 可选：小屏幕下防止内容贴边 */
}

.icon-item {
    text-align: center; /* 让模块内图标、文字居中 */
}

.icon-item img {
    display: inline-block; /* 确保图标居中显示 */
}

footer { 
    height: 350px; 
    background-color: #000;
    color: #FFF; /* 替换无效的text-emphasis-color，设置文字颜色 */
    display: flex;
    align-items: center;
    justify-content: center; /* 可选：让底部footer内容居中 */
}

核心要点 #

• 用grid-template-columns: repeat(3, 1fr)让头部和页脚统一3等宽列，自然实现对齐
• 通过max-width+margin: 0 auto让两个容器在页面居中且宽度一致
• 页脚模块统一类名，减少冗余代码，提升可维护性

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