CSS - centralise 3 column items

Question

.mrec-container { 
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 100%;
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
  @media (max-width: 768px) { 
    display: block;
    padding: 0;
  }
  .mrec-items { 
    padding: 20px; 
    text-align: center; 
    @media (max-width: 768px) { 
      padding: 0 0 30px; 
    } 
    div > div {
      margin: auto;
    }
  }
}