0

I'm trying to use css grid to place 2 links beside each other to be the same height with text centered both vertically and horizontally, regardless of how much text is in each link.

The grid itself is centered vertically, but the text does not fill the entire grid cell. Is it not possible to make the 2 links the same height?

Codepen:

https://codepen.io/stevea777/pen/VwXPZQE

.box {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-auto-rows: 1fr;
  height: auto;
  width: 300px;
  background: red;
}

a.button {
  background: green;
  color: white;
  text-align: center;
  padding: 10px;
  align-self: center;
}

a:nth-child(2) {
  background: blue;
}
<div class="box">
  <a class="button">Batman</a>
  <a class="button">Spiderman eats Cornbread with Maple Syrup</a>
</div>
miken32
  • 42,008
  • 16
  • 111
  • 154
Stephen Ash
  • 1
  • 1

1 Answers1

0

How about adding height: 100% to a.button class:

.box{
  display: grid;
  grid-template-columns: 50% 50%;
   grid-auto-rows: 1fr;
  height: auto;
  width: 300px;
  background: red;
 
}
a.button{
  box-sizing: border-box;
  background: green;
  color: white;
  padding: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  }
a:nth-child(2){
  background: blue;
}
<div class="box">
  <a class="button">Batman</a>
  <a class="button">Spiderman eats Cornbread with Maple Syrup</a>
</div>
Irakli Tchedia
  • 267
  • 1
  • 7