多背景图响应式CSS落地页布局难题及Grid方案自主实现

我正在开发一款高度为100vh的落地页，需要在页面中放置13张位置各异的背景图，目前在实现响应式布局、确保桌面端与移动端良好适配方面遇到了困难。

具体需求：

• 落地页高度固定为100vh
• 页面上需定位8张背景图
• 移动端布局需移除左右侧图片，顶部和底部图片各分为三个区域

我曾用position: absolute配合媒体查询调整图片位置，但响应效果很差，用户体验糟糕。另外，在页面div容器上设置样式时，没法给背景图添加带模糊滤镜（filter: blur()）的border-radius。

我使用的backgroundPosition属性代码片段如下：

backgroundPosition: `
  left top -80%,
  left bottom -80%,
  left calc(30% - 80px) center,
  left calc(15% - 80px) center,
  center top -80%,
  center bottom -80%,
  right top  -80%,
  right bottom  -80%,
  right calc(30% - 80px) center,
  right calc(15% - 80px) center
`,

恳请大家提供可行的建议或方案，帮助我优化响应式落地页布局，任何不影响用户体验的替代技术或方法我都愿意尝试。

更新：
目前已自行解决问题——采用Grid布局系统，通过grid-template-columns、grid-template-rows和grid-area属性，将图片作为对应div的背景图来实现预期效果。

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