.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(60, 1fr)
}

.col-60 { grid-column-end: span 60 } /* 1 column */
.col-30 { grid-column-end: span 30 } /* 2 columns */
.col-20 { grid-column-end: span 20 } /* 3 columns */
.col-15 { grid-column-end: span 15 } /* 4 columns */
.col-12 { grid-column-end: span 12 } /* 5 columns */
.col-10 { grid-column-end: span 10 } /* 6 columns */

/* helper columns */
.col-50 { grid-column-end: span 50 } /* 1 + 4 columns */
.col-45 { grid-column-end: span 45 } /* 1 + 3 columns */

@media (max-width: 600px)   {
      .grid {grid-gap: 10px 0 }
      .grid > * { grid-column-end: span 60 }
      img{ max-width:100%; height:auto }
  }