Html 在某个高度后更改元素的宽度

我的问题很简单——这种布局可能吗？我附上了一些代码和它应该是什么样子。它有一个菜单，一边是类别，另一边是产品。当带有类别的

div

结束时，产品的

div

应填充以下所有宽度。 将

#产品

分为两个独立的

div

s对我来说不是个好主意，因为例如

#菜单

的高度可以是1,5行图片

#菜单{
???
}
#产品{
???
}
...
…更多图片

您可以使用

CSS网格来实现这一点


.container{
显示：网格；
网格自动行：1fr；
网格模板列：重复（3，1fr）；
网格间距：5px；
}
.菜单{
背景颜色：橙色；
网格行开始：1；
网格行端：3；
}
.产品{
背景颜色：灰色；
}
.菜单，
.产品{
填料：2米；
}
OP-请注意，根据您的问题，您可能需要一些JS来调整菜单大小/菜单的css属性“grid row end”，如果您说它是动态的。
<style>
    #menu {
        ???
    }
    #products {
        ???
    }
</style>
<section class="container">
    <div id="menu">
        ...
    </div>
    <div id="products">
        <img src....>
        ...more images
    </div>
</div>