* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}



#container {
    /*grid-template-colums: 1fr, 1fr, 1fr*/
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));


}

#container div {
    min-height: 300px;
  
}

.grid-item.a {
   width: 100%;
}

.grid-item.b {
  
 width: 100%;

}

.grid-item.c {
  width: 100%;

}

.grid-item.d {
  
   width: 100%;
 

}

.grid-item.e {
   
width: 100%;
}




.grid-item img {
    width: 100%;
}


@media screen and (max-width: 1024px) {
    #container {
        grid-template-columns: repeat(2, 1fr);
    }



}

@media screen and (max-width: 100%) {
    #container {
        grid-template-columns: repeat(1fr);
    }

}