Как разместить изображения на странице HTML/CSS в нужном порядке?

Question

[xsmops]

Столкнулся с проблемой когда надо разместить 12 фото 270х220 в таком порядке: 3 ряда по 4 изображения. Выравниванием justify-content: center получается разместить в 4 ряда по 3 фото.

Answer 1

[xenonhammer]

Используйте на родительском блоке

display: grid;
grid-template-columns: repeat(3, 1fr);

Comments

[xsmops]

Получилось то же, что и с использованием justify-content: space-between

[xenonhammer]

Сделайте каждой картинке, width 100%
кстати 1fr - это ваша одна картинка, попробуйте задавать конкретный размер колонке:

display: grid;
grid-template-columns: repeat(3, 32%);

[WapSter]

xsmops, grid-template-columns: repeat(4, 1fr);