Html 使用浮动项网格避免空白

我正在尝试制作一个网格，在多行/4列网格中容纳3个不同大小的容器：1x1、1x2和2x2。我的目标是有一个网格，我可以在其中填充新的元素，这些元素将完全适合。问题是我在所有网格元素上都使用float:left，因此当我有一个2x2元素不是从第一列开始时，在该2x2项之前将有空白

部分{
宽度：50%；
}
.项目{
浮动：左；
}
img{
宽度：100%；
垂直对齐：中间对齐；
}
.一{
宽度：25%；
}
.二{
宽度：50%；
}
.4{
宽度：50%；
身高：50%；
}

---

感谢@Michael_B对使用这两个工具的洞察，我无法用Flex实现无间隙网格，尽管在了解了几个小时的新CSS网格后，我很好地管理了它（非常好）。它非常灵活，尽管我仍在试图找出如何使其响应，但在较小的分辨率下，行与行之间会出现间隙

~更新~ 通过将

minmax（）

函数的最大值设置为

grid auto rows

规则的

1fr

单元（覆盖所有可用空间），我成功地使网格在所有分辨率下都响应

/*为元素分配“网格模板区域”规则使用的变量*/
.a{网格区域：a；}
.b{网格区域：b；}
.c{网格区域：c；}
.d{网格区域：d；}
.e{网格区域：e；}
.f{网格区域：f；}
.g{网格区域：g；}
.h{网格区域：h；}
.i{网格区域：i；}
.j{网格区域：j；}
.k{网格区域：k；}
.l{网格区域：l；}
.m{网格区域：m；}
*{框大小：边框框；}
.集装箱{
长方体阴影：0.5×3×rgba（0,0,0,0.5）；
保证金：0自动；
最大宽度：800px；
/*网格属性*/
显示：网格；
网格模板列：重复（8，1fr）；
网格自动行：最小最大值（80px，1fr）；
/*制作自定义网格*/
网格模板区域：
“a b c c c c”
“d d c c c”
“e e f g”
“我我”
“j j k k l”；
}
img{
垂直对齐：中间对齐；
宽度：100%；
}
div{
背景色：#ccc；
颜色：#d9480f；
}

您是否愿意使用CSS网格或Flexbox？当然，任何可以让它工作的东西都可以在最后放入项目