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

Question

我的问题很简单-这种布局可行吗？我附加了一些代码以及它的外观。它的菜单一侧是类别，另一侧是产品。当div的类别结束时，产品的div应该填充下面的所有宽度。 将#products分成两个单独的div对我来说不是一个好主意，因为例如#menu的高度可以是1.5行（带图片）。

<style>
    #menu {
        ???
    }
    #products {
        ???
    }
</style>
<section class="container">
    <div id="menu">
        ...
    </div>
    <div id="products">
        <img src....>
        ...more images
    </div>
</div>

Answer 1

您可以使用CSS Grid来解决这个问题。

.container {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.menu {
  background-color: orange;
  grid-row-start: 1;
  grid-row-end: 3;
}

.product {
  background-color: gray;
}

.menu,
.product {
  padding: 2em;
}

<div class="container">
  <div class="menu"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>  
</div>

jsFiddle