flex inside grid - vertical align center last row

Question

in the example below how to place GO Y CENTER on center vertically
i.e. why align items:center doesn't work
also, can I do the same staying with grid - without using flex?

.apanel{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 140px));
    justify-content: center;
    grid-column-gap:15px;
    grid-row-gap:25px;
    width:calc(100% - 30px);
    margin:0 auto;
    text-align:center;
}
.apanel .card{
    display:flex;
    flex-direction:column;
    background:#eee;
}
.apanel .title{
    line-height:1.5em;
    padding:9px 14px;
    background:gold;
    flex:1;
    align-items:center;
}

<div class='apanel'>
<a class='card' href='#'>
<div class='sub'>LOREM</div>
<div>1-2-3</div>
<div class='title'>GO Y CENTER</div>
</a>
<a class='card' href='#'>
<div class='sub'>LOREM</div>
<div>1-2-3</div>
<div class='title'>LOREM IPSUM DOLOR SIT AMET CONSECTETUR</div>
</a>
</div>

score 1 · Accepted Answer · answered Jan 15 '21 at 20:09

Because .title is not display: flex and display is not an inherited property so you can't use any flex property like align-items. You have to define display: flex in .title also.

.apanel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 140px));
  justify-content: center;
  grid-column-gap: 15px;
  grid-row-gap: 25px;
  width: calc(100% - 30px);
  margin: 0 auto;
  text-align: center;
}

.apanel .card {
  display: flex;
  flex-direction: column;
  background: #eee;
}

.apanel .title {
  line-height: 1.5em;
  padding: 9px 14px;
  background: gold;
  flex: 1;
  display: flex;
  align-items: center;
}

<div class='apanel'>
  <a class='card' href='#'>
    <div class='sub'>LOREM</div>
    <div>1-2-3</div>
    <div class='title'>GO Y CENTER</div>
  </a>
  <a class='card' href='#'>
    <div class='sub'>LOREM</div>
    <div>1-2-3</div>
    <div class='title'>LOREM IPSUM DOLOR SIT AMET CONSECTETUR</div>
  </a>
</div>

flex inside grid - vertical align center last row

1 Answers1