html - 在一定高度后更改元素的宽度

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