如何使用媒体查询将手机上的 3 列 CSS 网格更改为 1 列

.history {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 1em;
  grid-row-gap: 100px;
}

.box1 {
  grid-column: 1/3;
}

.box2 {
  grid-column: 3;
  justify-self: center;
}

.box3 {
  grid-column: 1;
  justify-self: center;
}

.box4 {
  grid-column: 2/4;
}

.box5 {
  grid-column: 1/3;
}

.box6 {
  grid-column: 3;
  justify-self: center;
}

.box7 {
  grid-column: 1/4;
}

<div class="history">
  <div class="box1">
    <p>
      The story starts in 2010 with Hartstown
    </p>
  </div>
  <div class="box2">
    <img src="images/clubs.jpg" alt="Clubs">
  </div>
  <div class="box3">
    <img src="images/clubs1.jpg" alt="Clubs">
  </div>
  <div class="box4">
    <h3>Clubs Officialy Merge... </h3>
    <p>May 2011 saw the Official launch of Hartstown Aldridge Legends X1 in Dalymount Park...
    </p>
  </div>
  <div class="box5">
    <h3>Our First Full Season... </h3>
    <p>We started the 2011 / 2012 Season with Approx 280 registered club altogether we had 18 Teams…..
    </p>
  </div>
  <div class="box6">
    <img src="images/logo.jpg" alt="Logo">
  </div>
  <div class="box7">
    <h3>Forging Ahead... </h3>
    <p>We presently have approx 400 Registered Club Players and approx 60 nd 2 Over 35'5 Teams and we are still growing...
    </p>
  </div>
</div>

@media only screen and (max-width: 768px) {
  .history {
    display: grid;
    grid-template-columns: 1fr;
    padding: 1em;
    grid-row-gap: 100px;
  }
}