JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="item scooter">Scooter</div>
  <div class="item helmet">Helmet</div>
  <div class="item bicycle">Bicycle</div>
  <div class="item tent">Tent</div>
  <div class="item backpack">Backpack</div>
</div>

SCSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 15px 15px;
  grid-auto-flow: row;
  grid-template-areas:
    "scooter scooter helmet bicycle bicycle"
    "scooter scooter tent tent backpack";
  max-width: 900px;
  margin: auto;

  .item {
    padding: 10px 10px 100px 10px;
    background: silver;
    
    &.scooter {
      grid-area: scooter;
    }

    &.helmet {
      grid-area: helmet;
    }

    &.bicycle {
      grid-area: bicycle;
    }

    &.tent {
      grid-area: tent;
      background: orange;
    }

    &.backpack {
      grid-area: backpack;
    }
  }
}