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;
}
<section class="letter-grid">
<span class="alphabet">a</span>
<div class="filter-item-grid">
<div class="letter-grid__filter-item">
<h3 class="letter-grid__filter-title">
<a href="#">Example 1</a>
</h3>
<h3 class="letter-grid__filter-title">
<a href="#">Example 2</a>
</h3>
<h3 class="letter-grid__filter-title">
<a href="#">Example 3</a>
</h3>
</div>
</div>
</section>
Post a Comment for "Vertical Align And CSS Grid Relationship"