<div class="products">
  <div class="product">Keychains</div>
  <div class="product">Bracelets</div>
  <div class="product">Masks</div>
  <div class="product">Notebooks</div>
</div>
.products{
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 20% 30% 50%;
  grid-template-areas: 
  "keys . brace" 
  "mask note note";
  gap: 10px;
}
.product{
  border: 1px solid #18171C;
  border-radius: 8px;
  background-color: #8673A1;
  padding: 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.