當我調整窗口大小時，我試圖讓網格單元保持居中，但它們最終只是停留在原來的位置，而不是靠得更近。我試圖復制https://rickandmortyapi.com/。我認為通過codepen:https://codepen.io/Alessandro-Garcia/pen/RwqNaPq共享代碼到我的項目可能會更好

這是負責管理網格的代碼:

main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(589.19px, auto));
    gap: 0;
    overflow-x: hidden;
    justify-items: center;
    align-items: center;
}

這是負責單個細胞的代碼:

article{
    margin: auto;
}

你可以用flexbox代替grid實現你想要的。試著在你的主要元素上添加這個。

main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
}

如果你也想看看代碼，這里也有完整的例子。里克和莫蒂·科德彭。希望有所幫助！:)

關于flexbox的更多信息，因為你提到你是CSS的新手，看看這里。

您可以在網格容器上使用justify-content: center。CSS tricks有一個很好的網格備忘單。

我已經編輯了你的代碼筆，并添加了justify-content:center；去主路。看起來工作正常。

下面的例子:

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  gap: 0.5rem;
  outline: 1px solid red;
  justify-content: center;
}

.container>div {
  width: 100%;
  background-color: gray;
  border-radius: 1rem;
  padding: 2rem;
}

<div class='container'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>