problem in make center the Grid in html css

Question

i have a grid that show data of mysqli databass. my problem is : the grid is left of the page, i wanna put it in center. i use text-align and other things but not work. (i want just show 3 grid) this is my code:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 5px;
  padding: 10px;



}

.grid-container > div {
 background: linear-gradient(75deg, #3c3ad0, #269e88);
  text-align: center;
  border-radius: 20px;
  color: #fff;


}

.item1 {
  grid-row:span 1;
}


<p style="margin-top: 20px;text-align: center;font-size: 30px;color: #00b7c3"  >پروژه های اخیر</p>

<div class="grid-container">

  <div class="item1">
<p style="font-size:18px;">textt</p>
  <p style="font-size:10px;">texttt</p>
  <footer style="background-color:#35BD65;border-radius:0px 0px 20px 20px">
 'texttt'</footer>
  </div>

</div>

Answer 1

Any reason you need to use grid? Here is a solution as simple HTML and CSS

.grid-container {
  width:100%;
}

.grid-container > div {
  background: linear-gradient(75deg, #3c3ad0, #269e88);
  text-align: center;
  border-radius: 20px;
  color: #fff;
}

.item1 {
  width:200px;
  margin:0 auto;
}

<p style="margin-top: 20px;text-align: center;font-size: 30px;color: #00b7c3"  >Test</p>

<div class="grid-container">

  <div class="item1">
      <p style="font-size:18px;">text0</p>
      <p style="font-size:10px;">text1</p>
      <footer style="background-color:#35BD65;border-radius:0px 0px 20px 20px">text2</footer>
  </div>

</div>