如何用Grid构建适配320px的自适应图片块，实现末行两图居中

我没法用Grid实现适配320px分辨率的自适应图片块，且不能添加额外代码。关键问题是末行需要放置两张图片并居中显示，同时不能拉伸图片。

我尝试使用grid-area属性，但这个属性阻碍了后续的适配效果，也有可能是我对该属性的写法有误。

以下是我通过Grid generator生成的代码：

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 1 / 4 / 2 / 5; }
.div5 { grid-area: 2 / 1 / 3 / 2; }
.div6 { grid-area: 2 / 2 / 3 / 3; }
.div7 { grid-area: 2 / 3 / 3 / 4; }
.div8 { grid-area: 2 / 4 / 3 / 5; }
.div9 { grid-area: 3 / 2 / 4 / 3; }
.div10 { grid-area: 3 / 3 / 4 / 4; } 

内容的提问来源于stack exchange，提问作者Dmitro Master