Vertical Align And Css Grid Relationship

How do vertical align and CSS grid work together? I have an element that is next to elements that need to be aligned exactly in the middle. See below: In the example I have alphab

Solution 1:

No, vertical-align will not work when there is no inline line-box.

In this case, you've made the span a flex-child and, effectively, removed the inline nature of the span.

I'd suggest flexbox on the alphabet span.

.alphabet {
  font-size: 80px;
  display: flex;
  align-items: center;
}

.letter-grid {
  display: flex;
}

.filter-item-grid {
  display: grid;
  display: -ms-grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-content: space-between;
}

.letter-grid__filter-item {
  display: grid;
  display: -ms-grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  margin-left: 24px;
}

section * {
  border: 1px solid lightgrey;
}

<sectionclass="letter-grid"><spanclass="alphabet">a</span><divclass="filter-item-grid"><divclass="letter-grid__filter-item"><h3class="letter-grid__filter-title"><ahref="#">Example 1</a></h3><h3class="letter-grid__filter-title"><ahref="#">Example 2</a></h3><h3class="letter-grid__filter-title"><ahref="#">Example 3</a></h3></div></div></section>