.grid {
    width: 100%;
    position: relative;
}
.grid::after {
    content: "";
    display: block;
    clear: both;
}
.grid-sizer {
    width: 200px; /* or any fraction (like 300px width if you prefer fixed size) */
}

.grid-item {
  float: left;
  width: 250px;
  height: auto;
  padding: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 5px;
  color: white;
  font-size: auto;
  overflow: hidden;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 300px;
    max-height: 500px;
}
  
.grid-item:nth-child(10n+0) { background: #6ea2da; }
.grid-item:nth-child(10n+1) { background: #A7D3A6; }
.grid-item:nth-child(10n+2) { background: #FFE2FE; }
.grid-item:nth-child(10n+3) { background: #FBACBE; }
.grid-item:nth-child(10n+4) { background: #a29bdd; }
.grid-item:nth-child(10n+5) { background: #ddc5f2; }
.grid-item:nth-child(10n+6) { background: #daec94; }
.grid-item:nth-child(10n+7) { background: #2176AE; }
.grid-item:nth-child(10n+8) { background: #AFBC88; }
.grid-item:nth-child(10n+9) { background: #F9ADA0; }