JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Our Services</h2>
          <div class="grid-squares">
            <div class="grid_item" id="g1">
              <h2>Service One</h2>
              <p>
                lorem impsum
              </p>
              <button id="repairs-upgrades-button">Learn More</button>
            </div>
            <div class="grid_item">
              <h2>Service Two</h2>
               <p>
                lorem impsum
              </p>
              <button>Learn More</button>              
            </div>
            <div class="grid_item">
              <h2>Service Three</h2>
              <p>
                lorem impsum
              </p> 
              <button>Learn More</button>             
            </div>
            <div class="grid_item">
              <h2>Service Four</h2>
               <p>
                lorem impsum
              </p> 
               <button>Learn More</button>             
            </div>
          </div><!-- Close .grid-squares -->

CSS

.grid-squares{
  display: grid;
  /*grid-template-columns: repeat(auto-fill, 150px); this says repeat as many 150px tracks as possible, but we've lost our flexiblity, use minmax() to fix this.*/
  grid-template-columns: 1fr 1fr; /* Tracks are a minimum of 150px, but if there is space left it will distributed among each track evenely. Flexibility is back.*/
  grid-auto-rows: 300px;
  grid-gap: 40px;
  margin: 0px 50px;
}
.grid_item{
  border: 3px solid black;


}

JavaScript

repairsAndUpgradesButton = document.getElementById("repairs-upgrades-button");
repairsAndUpgradesButton.onclick = function(){
  squaresGrid = document.getElementsByClassName("grid-squares");
  g1 = document.getElementById("g1");
  console.log(g1)
  g1.style.gridColumn = "1/3";
  g1.style.gridRow = "1/3";



}