CSS网格和链接

Question

我有一个网格，里面是四个div。这四个div也是display: grid。四个div中的每一个都有一个链接。其中一个链接包含的文本将转到另一行。这使得网格中的所有div都更高。但是链接hover上较短的链接不拉伸到div的底部。我如何得到链接拉伸div的全部高度?因此，整个高度是可点击和背景颜色的变化?

.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

您可以使用flex，参见代码片段:

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

Answer 2

你可以给它一个height: 100%，它应该工作。在示例中，我还添加了背景色，以便您可以更好地看到link元素

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.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: flex;
align-items: center;
justify-content: center;
color: black;
padding: 2.1rem;
background-color: pink;
height: 100%;
}
.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>