CSS grid and links-CodePudding

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 >
    <div >
        <a href="case-studies.php">One line link</a>
    </div>
    <div >
        <a href="case-studies.php">One line link</a>
    </div>
    <div >
        <a href="case-studies.php">Two lines<br>longer link</a>
    </div>
    <div >
        <a href="case-studies.php">One line link</a>
    </div>
</div>

CodePudding user response：

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 >
    <div >
        <a href="case-studies.php">1</a>
    </div>
    <div >
        <a href="case-studies.php">One line link</a>
    </div>
    <div >
        <a href="case-studies.php">Two lines<br>longer link</a>
    </div>
    <div >
        <a href="case-studies.php">One line link</a>
    </div>
</div>

CodePudding user response：

You can give it a height: 100% and it should work. On the example i also added a background color so you can see better the link element

* {
  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 >
  <div >
    <a href="case-studies.php">One line link</a>
  </div>
  <div >
    <a href="case-studies.php">One line link</a>
  </div>
  <div >
    <a href="case-studies.php">Two lines<br>longer link</a>
  </div>
  <div >
    <a href="case-studies.php">One line link</a>
  </div>
</div>