flexbox grid

by rdenver6

HTML

<div class="sp-field-customFormatter cultureGridContainer">
  <div class="cultureGridRow">
    <div class="cultureGridItem">
      <div class="cultureGridItemWrapper"><img style="width:auto;height:160px;border-radius:50%;" src="/sites/CorpComm/PeopleProfiles/dunn.png" title="[$Title])">
        <div style="display:inline-block;padding-top:8px;text-align:left;">
          <div style="margin-bottom:12px;font-size:16px;font-weight:600;">Embracing Change and Growing a Career</div>
          <div style="margin-bottom:12px;font-size:14px;">In her work as vice president of Global Customer Solutions, Liz Dunn services and grows several of Prologis’ most strategic customer accounts. She...</div>
        </div>
        <div style="font-size:14px;position:absolute;bottom:0;text-align:left;"><a style="color:#2CB5E5;font-size:14px;font-weight:600;margin-bottom:12px;text-decoration:none;" href="https://www.prologis.com/about-us/employee-stories/embracing-change-and-growing-career" target="'_blank'" rel="noopener noreferrer ">Read Story</a></div>
      </div>
    </div>
  </div>
</div>

CSS

.cultureGridContainer {
  max-width: 1280px;
  margin: 0 auto;
}

.cultureGridRow {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.cultureGridItem {
  height: 280px;
  flex-basis: 25%;
  -ms-flex: auto;
  width: 290px;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}

.cultureGridItemWrapper {
  -webkit-box-sizing: initial;
  -moz-box-sizing: initial;
  box-sizing: initial;
  background: #aaa;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.grid-item-container {
  /* height: 100%;
  width: 100%;
  position: relative;*/
}

@media(max-width: 1024px) {
  .grid-item {
    flex-basis: 50%;
  }
}


@media(max-width: 400px) {
  .grid-item {
    flex-basis: 100%;
  }
}