Cacher is the code snippet organizer for pro developers

/* ------------------------------------------
    Basic one-column layout for all browsers
--------------------------------------------*/

.grid-container {
  max-width: 50em;
}
.grid-container > * {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  padding: 1rem;
}

/* ------------------------------------------
    CSS Grid layout for modern browsers
--------------------------------------------*/
@supports (display: grid) {
  
  @media (min-width: 50em) {
    
    .grid-container {
      display: grid;
      margin: auto;
      grid-template-columns: repeat(4, 200px);
      grid-template-rows: repeat(2, 200px);
      grid-gap: 20px;
    }