css grid is not responsive

Question

I'm making a grid with 3 columns and 3 rows everything works fine but it's not responsive I tried to use media queries but it looks like this.

any solutions?

<div class="projectPhotos">
 <div class="_a p1">1</div>
 <div class="_a p2">2</div>
 <div class="_a p3">3</div>
 <div class="_a p4">4</div>
 <div class="_a p5">5</div>
 <div class="_a p6">6</div>
 <div class="_a p7">7</div>
</div>

._a{
  width:220px;
  height:120px;
  background:gray;
  border: 1px solid #fff;
  font-size: 30px;
  text-align: center;
  color:white;
  margin: auto;
}
.projectPhotos{
  display: grid;
  grid-template-columns: auto auto auto;
  box-sizing: border-box;
  grid-gap: 40px 60px;
  box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
  .projects{
    width:350px;
  }
  .projectPhotos{
    grid-gap:10px 10px;
  }
  .projectPhotos ._a{
    width:300px;
    height:100px;
  }
}

Answer 1

I suppose that when you use grid-template-columns: auto auto auto; this means that you'll always have a grid with 3 columns. What I suggest to make this responsive is just apply "grid-template-columns" into your media query like this, for example:

@media only screen and (max-width: 600px) {
 .projects{
   width:350px;
 }
 .projectPhotos{
   grid-template-columns: auto;
   grid-gap:10px 10px;
 }
 .projectPhotos ._a{
   width:300px;
   height:100px;
 }
}

This way you are setting that your grid will have only one column when the media query is true.