网格-CSS自动调整大小，自动填充右对齐

Question

在使用自动调整大小时，我注意到当我使用自动填充时，网格向右对齐。 我对自动调整大小有基本的了解。

.wrapper-fill{
              display:grid;
              grid-template-columns: repeat(auto-fill, 300px);
              grid-template-areas: "header header header"
                                   "left-sidebar .. right-sidebar"
                                   "footer footer footer";
              grid-gap:10px;
}

第一个网格为auto-fit，第二个网格仅更改grid-template-columns的{​​{1}}属性 See the codepen

是否有默认设置，或者我做错了什么？