Сетка, размер и положение проблемы.HTML / CSS

Question

Вот мой проект.

Im trying to make a grid that will be centered in the middle of the page. But im finding it impossible...

also the grid im making will only take the size of the pictures. like this:

Here is my code, uploaded it to replit but the pictures were store locally tho.

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://repl.it/repls/HonorableEffectiveCell

Answer 2

Замените тег grid_columns этим.

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

Если это работает, добавьте это в файл CSS.