<p>我有一个基于 CSS 网格的两列布局。当第二列的内容超过 <code>1fr</code> 我想创建一个新行。按照目前的情况，内容只是溢出了该列。</p>
<p>此布局的一个要求是<code>右侧菜单</code>列中的项目位于一行中。我通过以下方式实现这一目标：</p>
<pre class="brush:php;toolbar:false;">.right-menu {
...
grid-auto-flow: column dense;
...
}</pre>
<p>如果我删除<code>grid-auto-flow</code>属性，溢出就会停止。但是，这些项目现在堆叠成多行，这不是我想要的。</p>
<p>我还尝试将 <code>.right-menu</code> 更改为</p>
<pre class="brush:php;toolbar:false;">.right-menu {
display: 'inline-flex';
}</pre>
<p>但是，结果和以前一样。内容溢出列。有没有办法不用 JavaScript 就能做到这一点？媒体查询已经过时，因为这是基于内容的，而不是视口宽度。</p>
<p>
<pre class="snippet-code-css lang-css prettyprint-override"><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></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><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>
项目：7
项目：8
项目：9
项目：10
项目：11
项目：12
项目：13
使用 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>