如何通过CSS使DIV捕捉到网格？

我试图弄清楚如何通过CSS将DIV列捕捉到某个固定大小的网格

以下是我正在处理的测试页面：

我想得到的是，右边的DIV（绿色的）在背景网格中的某个方向上被拍到：当调整浏览器窗口的大小时，红色的Quad应该分布在中间区域，而绿色列应该“填充”页面右边的剩余区域，但是仍然总是与网格对齐（左边）。 基本上，作为网格四边形大小的一部分，右绿色div应该具有可变宽度，等于或大于a，并且无论如何小于2a（在这种情况下，它应该设置回a的宽度，同时有一个红色四边形从下一行移动到上一行）

下面是一张图片，让您了解更多信息：

（对不起，我的名誉不允许超链接）

我不确定这是否可以通过CSS实现，但我相信你们中的一些人可以帮助找到一些解决方案或解决方法。如果可能的话，我不会使用javascript

谢谢你的帮助，

---

s

不幸的是，HTML/CSS没有实现所需功能。您只能通过使用JavaScript来实现它

您应该将一个函数绑定到windowresize事件，该事件会将green的div width设置为所需的值。在jQuery中，它应该是这样的：

$(window).resize(function() {
    $("#rx").width(
        parseInt($("#rx").css("min-width").slice(0, -2)) + (
            ($(window).width() - $("#lx").width() - $("#rx").css("min-width").slice(0, -2)) % $(".module:first").outerWidth(true)
        )
    );
});

---

请注意，此代码可以轻松优化，但我希望使其尽可能简单。

很抱歉，从未将其标记为正确答案。。。迟到总比不到好：）谢谢