Responsive grid with CSS Grids

Responsive grid with CSS Grids

by kidastudio

HTML

<div class="iconsrow">
  <ul>
    <li>
      <div class="ratrace">
      </div><span>Rat Race</span></li>
    <li>
      <div class="man"></div><span>1 in 3  Adults are <br>Financially Literate</span></li>
    <li>
      <div class="taxes"></div><span>Working 4 to 5 months <br>for your taxes</span></li>
  </ul>
</div>

CSS

.ratrace {
  width: 150px;
  height: 175px;
  margin: 2% auto;
  background: url('https://www.coinzventure.com/wp-content/uploads/2018/07/rat-race.png') left center;
  animation: play 1s steps(24) 10;
}

.man {
  width: 150px;
  height: 175px;
  margin: 2% auto;
  background: url('https://www.coinzventure.com/wp-content/uploads/2018/07/man.png') left center;
  animation: play 2s steps(24) 5;
}

.taxes {
  width: 150px;
  height: 175px;
  margin: 2% auto;
  background: url('https://www.coinzventure.com/wp-content/uploads/2018/07/taxes.png') left center;
  animation: play 2s steps(24) 5;
}

@keyframes play {
  100% {
    background-position: -3600px;
  }
}

.iconsrow {
  padding: 10px;
  
  
}

.iconsrow ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  grid-gap: 0px;
  text-align: center;
}

.iconsrow li {
  background-color: #fff;
  padding: 5px;
  font-size: 14px;
  display: inline;
}

.iconsrow li span {
  padding: 10px;
  display: block;
  font-size: 20px;
}