Justified Image Grid with Label

by Rene van der Lende

HTML

<div class="expertise">
  <div class="icon-wrapper">
    <div class="img"></div>
    <p>Label</p>
  </div>
  <div class="icon-wrapper">
    <div class="img" style="height: 60px"></div>
    <p>Label</p>
  </div>
  <div class="icon-wrapper">
    <div class="img"></div>
    <p>Label</p>
  </div>
  <div class="icon-wrapper">
    <div class="img"></div>
    <p>Label</p>
  </div>
  <div class="icon-wrapper">
    <div class="img"></div>
    <p>Label</p>
  </div>
  <div class="icon-wrapper">
    <div class="img" style="height: 50px"></div>
    <p>Label</p>
  </div>
  <div class="icon-wrapper">
    <div class="img" style="height: 70px"></div>
    <p>Label</p>
  </div>
</div>

CSS

.expertise {
    display: flex;      /* make element a flexible layout container */
    flex-wrap: wrap;    /* a row of N columns, wrapping within frame*/
    justify-content: space-between; /* evenly space elements, outer to the edges */
    align-items: flex-end; /* bottom align elements */
    background-color: silver;
}

.icon-wrapper {
    background-color: blue;
    max-width: 100%;    /* don't make this too small, leave as is or make it a multiple of min-width */
    max-height: 100%;   /* ditto */
    min-height: auto;   /* override if you want to set minimum; interacts with flex-basis! */
    overflow: hidden;   /* Chop off outside content */
    margin: 8px         /* some space between the boxes */
}
.icon-wrapper p {
  text-align: center;
}

.icon-wrapper .img {
    display: block;     /* default inline, block removes bottom space */
    width: 4rem;
    height: 4rem;
    background-color: red;
}