CSS grid and links

Question

I have a grid, inside which is four divs. The four divs are also display: grid. Inside each of the four divs is a link. One of the links contains text that goes on to an extra line. This makes all the divs in the grid taller. But link hover on the shorter links does not stretch to the bottom of the div. How do I get the links to stretch the full height of the div? So that the full height is clickable and background colour changes?

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

.button {
    display: grid;
    align-items: center;
    font-size: 2.4rem;
    line-height: 2.8rem;
    text-align: center;
    border:  1px solid;
    }

.button a:link { display: block; color: black; padding: 2.1rem; }
.button a:visited { display: block; color: black; padding: 2.1rem; }
.button a:hover { display: block; color: black; padding: 2.1rem; background-color: rgba(0, 0, 0, 0.1); }
.button a:active { display: block; color: black; padding: 2.1rem; background-color: rgba(0, 0, 0, 0.1); }

<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>

Answer 1

You could use flex, see code snippet:

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

.button {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-size: 2.4rem;
    line-height: 2.8rem;
    text-align: center;
    border:  1px solid;
}

.button a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    padding: 2.1rem;
}

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

<div class="block-intro">
    <div class="button">
        <a href="case-studies.php">1</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>