Issue
I have three icons in a row, each icon has a title and a subtitle under it. What I try to do is align the title on the same line no matter how much subtitle is big. I need it working on mobile and desktop.
This is the code I do so far, but don't success to align them. If you can help me solve this using flex that would be great
#join3icons {
display: flex;
flex-direction: row;
justify-content: center;
gap: var(--size-125);
padding: 0 var(--size-125);
}
.icon-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
}
<div id="join3icons">
<div class="icon-box">
<a href="."><img src="Easier.svg"></a>
<span class="headline3">Einfacher</span>
<span class="sub3iconsText">Auftragsverfolgung</span>
</div>
<div class="icon-box">
<a href="."><img src="Faster.svg"></a>
<span class="headline3">Schneller</span>
<span class="sub3iconsText ">Checkout-Vorgang</span>
</div>
<div class="icon-box">
<a href="."><img src="Earn.svg"></a>
<span class="headline3">Besser</span>
<span class="sub3iconsText ">Lorem Ipsum is simply dummy text</span>
</div>
</div>
Solution
You can achieve this by using grid instead of flexbox
#join3icons {
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
justify-items: center;
align-items: center;
}
Delete the icon box css class and the according divs and everything gets ordered by your grid
Depending on what you want you can replace the 1fr in the grid-template-rows line by auto, so each line has its own height. Of course you can add a gap aswell
Answered By - Seryn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.