Javascript 如何在div中排列图像？

我正在为Uni做一个项目，我需要上传图像到指定的宽度和高度，让每个人都能看到。它基本上相当于：。问题是，我在HTML方面有以下内容：

<div id="canvas">
</div>

这是我使用的Javascript，只是为了看看它是如何工作的。但是，当我们使用不同大小的图像时，例如，我们放置3个20x20并添加一个20x40，然后使用20x20完成该行的其余部分。一旦我再添加一个20x20，它将不会开始填充20x40左侧的可用空间，而是开始填充20x40的右侧。

---

我想用红色来填补蓝色的空白。红色=50x10蓝色=50x20

您试图做的被称为“砖石布局”，它们的实现不是很简单。它通常要求您将内容流更改为以列而不是行的形式运行

我甚至不确定您的确切场景是否可以在无需手动放置的情况下完成，但这里有一个垂直砖石布局的示例（来源：）：

/*重置CSS*/
* {
保证金：0；
填充：0；
框大小：边框框；
}
html，
身体{
背景：线性梯度（45度，#190f2c，#200b30）；
填充：15px；
}
img{
最大宽度：100%；
高度：自动；
垂直对齐：中间对齐；
显示：内联块；
}
/*主要CSS*/
.grid wrapper>div{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.grid wrapper>div>img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
边界半径：5px；
}
.网格包装器{
显示：网格；
栅隙：10px；
网格模板列：重复（自动拟合，最小值（75px，1fr））；
网格自动行：100px；
网格自动流动：稠密；
}
.网格包装。宽{
格构柱：跨度2；
}
.网格包装器.高{
网格行：跨度2；
}
.网格包装，大{
格构柱：跨度2；
网格行：跨度2；
}

const canvas=document.getElementById('canvas')
const btn = document.getElementById('submit-button');
const image_width=document.getElementById('image_width');
const image_height=document.getElementById('image_height');

btn.addEventListener('click', (event) => {
    var x=document.createElement('img');
    var color=document.getElementById('color');
    if(color.value==='red')
    {
        x.src='red.png';
    }
    else if(color.value==='blue')
    {
        x.src='blue.png';
    }
    x.width=image_width.value;
    x.height=image_height.value
    event.preventDefault();
    canvas.appendChild(x);
});