Search code examples
htmlcssflexboxalignment

3 icons with title and subtitle, align them according to title

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. enter image description here

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