<div class="container">
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
  <i class="oi oi-dashboard"></i>
</div>
.container{
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: yellow;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
}
.container i{
  padding: 3px;
  background: yellowgreen;
  font-size: 2rem;
  text-align: center;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
}
.container i:hover{
  cursor: pointer;
  background: green;
}
@media screen and (max-width: 900px){
  .container i{
    aspect-ratio: 2;
  }
}

External CSS

  1. https://cdn.jsdelivr.net/npm/open-iconic@1.1.1/font/css/open-iconic-bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.