Css 动态重缩放的div网格

我想得到以下布局：

[ ][ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ][ ]

其中每个[]最多应为300x150px，但按比例缩小到 根据需要设置边界框，保留纵横比

.field {
    width: 16%;
}

.field .placeholder{
    float: left;
    width: 300px;
    height: 150px;
}

我尝试在div中添加占位符div，但没有成功 真的很有帮助，它给了我类似于

[ ]
[ ]
[ ]
...

---

尝试使用“最大宽度”和“最大高度”css属性，并将“宽度”和“高度”设置为某些百分比。

这是您想要的吗

---

看起来我需要一张桌子

td { width: 1%; }

---

注意水平方向上的相等，但我仍然有垂直间距的问题。

这看起来很像一张桌子。你确定它不是一张桌子吗？这个结构的用途是什么？@F.Calderan它应该作为一个运动场。这仍然给了我一个[]\n[]\n布局。你能提供更多的代码吗？html结构和css？也许是一杯鸡尾酒？