网格、大小和位置问题。html/css

这是我到目前为止的项目

我试图创建一个以页面中间为中心的网格。但是我发现这是不可能的

此外，我制作的网格将只拍摄照片的大小。像这样：

这是我的代码，上传到replit，但是图片是本地存储的

---

->期望的结果

用此替换网格列标记

<div class="grid_columns" style="width: 500px; margin: 0 auto; background: #000; color: #fff;">

---

如果工作正常，那么将其添加到CSS文件中。

根据您的要求，我已经更改了您的CSS文件代码

.grid_columns {
    display: grid;
    z-index: 1;
    text-align: center;
   grid-template-columns: 25% 25% 25% 25%;
  }

.grid_columns div{
   padding:0px 15px 0px 15px;
}

.grid_columns div img{
  width: 100%;
  object-fit: cover;
}

在css文件中，网格模板列会根据列号进行更改。 如果是4柱网格。应该是这样,

grid-template-columns: 25% 25% 25% 25%;

如果是5列。应该是这样的

grid-template-columns: 20% 20% 20% 20% 20%; 

因为所有百分比的总和应该是100%

img宽度应更改为%值以使其响应。因此，我删除了其他值

.grid_columns div img{
  width: 100%;
 }

这是我在Repl.it中的代码

---

共享您的代码。您希望每行仅4列？您对代码的要求。您的代码应该在问题本身中，而不仅仅是从第三方网站链接到。嘿，感谢您的帮助，是否可以这样制作网格？检查一下这个。我为此创建了两个单独的柱网轴线