如何让CSS Grid中链接铺满父div高度，实现全区域可点击及hover效果？

云原生阿岚

2026-8-12

解决CSS Grid中链接无法铺满容器高度的问题

问题原因

你的.button容器使用display: grid和align-items: center后，内部链接仅靠内容+内边距撑高度，被垂直居中在容器里，没有填满.button的完整高度。当某条链接文本换行导致所有.button高度统一时，短链接的hover效果自然覆盖不了容器底部的空白区域。

解决方案

让链接完全填满父容器高度，同时保持文本居中：

给.button添加grid-template-rows: 1fr，确保内部元素能占满容器垂直空间
将链接设为display: grid，通过align-items: center让文本垂直居中，同时链接自身会铺满.button的整个高度
合并链接的通用样式，减少伪类代码冗余

修改后的完整代码

CSS

.block-intro {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 3.6rem;
}

.button {
    display: grid;
    grid-template-rows: 1fr; /* 强制内部元素占满垂直空间 */
    font-size: 2.4rem;
    line-height: 2.8rem;
    text-align: center;
    border: 1px solid;
}

.button a {
    display: grid;
    align-items: center; /* 让文本在链接内部垂直居中 */
    padding: 2.1rem;
    color: black;
    text-decoration: none; /* 可选：移除默认下划线 */
}

.button a:hover,
.button a:active {
    background-color: rgba(0, 0, 0, 0.1);
}

HTML

<div class="block-intro">
    <div class="button">
        <a href="case-studies.php">One line link</a>
    </div>
    <div class="button">
        <a href="case-studies.php">One line link</a>
    </div>
    <div class="button">
        <a href="case-studies.php">Two lines<br>longer link</a>
    </div>
    <div class="button">
        <a href="case-studies.php">One line link</a>
    </div>
</div>