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

Question

到目前为止，这是我的项目。

我正在尝试制作一个将在页面中间居中的网格。但是我发现不可能...

网格生成也只会采用图片的大小。像这样：

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

https://repl.it/@oNilian/ImpeccableBoringMp3

->所需结果。 https://i.imgur.com/RxvpHPJ.jpg

Answer 1

根据您的要求，我已更改了代码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文件grid-template-columns中的

根据列号而变化。 如果是4列网格。应该是这样

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

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

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

因为所有百分比之和应为100％

img width的值应更改为%以使其具有响应性。因此，我删除了其他值。

.grid_columns div img{
  width: 100%;
 }

这是我在Repl.it中的代码

https://secure.ccavenue.com/transaction/transaction.do?command=initiateTransaction

Answer 2

以此替换grid_columns标记。

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

如果可以，则将其添加到CSS文件中。