CSS 网格：当子内容溢出列宽时创建新行

Question

我有一个基于 CSS 网格的两列布局。当第二列的内容超过 1fr 我想创建一个新行。按照目前的情况，内容只是溢出了该列。

此布局的一个要求是右侧菜单列中的项目位于一行中。我通过以下方式实现这一目标：

.right-menu {
  ...
  grid-auto-flow: column dense;
  ...
}

如果我删除grid-auto-flow属性，溢出就会停止。但是，这些项目现在堆叠成多行，这不是我想要的。

我还尝试将 .right-menu 更改为

.right-menu {
  display: 'inline-flex';
}

但是，结果和以前一样。内容溢出列。有没有办法不用 JavaScript 就能做到这一点？媒体查询已经过时，因为这是基于内容的，而不是视口宽度。

<code>.main-container {
  background-color: #ccc;
  padding: 1.0rem;
  width: 1200px;
  margin: 1.0rem 0 0 1.0rem;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  grid-template-rows: repeat(auto-fill, 1fr);
  grid-auto-flow: row;
  grid-row-gap: 1.0rem;
}

.left-menu {
  font-size: 1.25rem;
}

.right-menu {
  display: grid;
  background-color: white;
  grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
  grid-auto-flow: column dense; 
  grid-row-gap: 0.5rem;
  grid-column-gap: 0.75rem;
}

.right-item {
  background-color: #fff;
  text-align: center;
  min-width: 65px;
  border: 1px solid black;
}</code>

<code>&lt;div class="main-container"&gt;
    &lt;div class="menu-grid"&gt;
        &lt;div class="left-menu"&gt;Left&lt;/div&gt;
            &lt;div class="right-menu"&gt;
                &lt;div class="right-item"&gt;Item: 1&lt;/div&gt;
                &lt;div class="right-item"&gt;Item: 2&lt;/div&gt;
                &lt;div class="right-item"&gt;Item: 3&lt;/div&gt;
                &lt;div class="right-item"&gt;Item: 4&lt;/div&gt;
                &lt;div class="right-item"&gt;Item: 5&lt;/div&gt;
                &lt;div class="right-item"&gt;Item: 6&lt;/div&gt;
                &lt;div class="right-item"&gt;Item: 7&lt;/div&gt;
                &lt;div class="right-item"&gt;Item: 8&lt;/div&gt;
                &lt;div class="right-item"&gt;Item: 9&lt;/div&gt;
                &lt;div class="right-item"&gt;Item: 10&lt;/div&gt;
                &lt;div class="right-item"&gt;Item: 11&lt;/div&gt;
                &lt;div class="right-item"&gt;Item: 12&lt;/div&gt;
                &lt;div class="right-item"&gt;Item: 13&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code>

Answer 1

使用 Flexbox 会让你好运

.main-container {
  background-color: #ccc;
  padding: 1.0rem;
  width: 1200px;
  margin: 1.0rem 0 0 1.0rem;
}

.menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0rem;
}
.menu-grid > * {
  flex: 600px;
}
.left-menu {
  font-size: 1.25rem;
}

.right-menu {
  display: grid;
  background-color: white;
  grid-auto-columns: 65px;
  grid-auto-flow: column; 
  grid-row-gap: 0.5rem;
  grid-column-gap: 0.75rem;
}

.right-item {
  background-color: #fff;
  text-align: center;
  min-width: 65px;
  border: 1px solid black;
}

<div class="main-container">
    <div class="menu-grid">
        <div class="left-menu">Left</div>
            <div class="right-menu">
                <div class="right-item">Item: 1</div>
                <div class="right-item">Item: 2</div>
                <div class="right-item">Item: 3</div>
                <div class="right-item">Item: 4</div>
                <div class="right-item">Item: 5</div>
                <div class="right-item">Item: 6</div>
                <div class="right-item">Item: 7</div>
                <div class="right-item">Item: 8</div>
                <div class="right-item">Item: 9</div>
                <div class="right-item">Item: 10</div>
                <div class="right-item">Item: 11</div>
                <div class="right-item">Item: 12</div>
                <div class="right-item">Item: 13</div>
        </div>
    </div>
</div>