Flex-Box: Align Last Row to Grid

.parent {
    display: flex;
    flex-wrap: wrap;
    padding: 24px 20px;
    justify-content: center;
    gap: 16px;
    width: 350px;
    margin: 0 auto;
}

.parent > .card {
   height: 220px;
   width: 152px;
   border: 1px solid black;
}

<div class="parent">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>

Flex-box: Align last row to grid

Add a ::after which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

flex inside grid - vertical align center last row

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>

.box {
  border: 1px solid red;
  height:50px;
  grid-column: span 2;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap:1em;
}

.box:nth-child(7) {
  grid-column: 2 / span 2;
}

.box:nth-child(8) {
  grid-column: 4 / span 2;
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>