CSS 網格：當子內容溢出列寬時建立新行

Question

<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> <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>

項目：12

項目：13

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>