.grid
  .grid__layout
    .grid__item Item 1
    .grid__item Item 2
    .grid__item Item 3
    .grid__item Item 4
    .grid__item Item 5
    .grid__item Item 6

.grid {
  background: #fff;
  padding: 16px 16px 0;
  --itemPerRow: 4;
  --itemMargin: 16px;
  
  @media (max-width: 1399.98px) {
    --itemPerRow: 3;
    --itemMargin: 16px;
  }

  @media (max-width: 1199.98px) {
    --itemPerRow: 2;
    --itemMargin: 14px;
  }

  @media (max-width: 991.98px) {
    --itemPerRow: 1;
    --itemMargin: 12px;
  }
  
  &__layout {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--itemMargin));
  }
  
  &__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    background: #4dabff;
    width: calc(100% / var(--itemPerRow) - var(--itemMargin));
    margin: 0 var(--itemMargin) var(--itemMargin) 0;
  }
}