CSS 網格：當子內容溢出列寬時建立新行-PHP中文網路問答

我有一個基於 CSS 網格的兩列佈局。當第二列的內容超過 1fr 我想建立一個新行。按照目前的情況，內容只是溢出了該列。

此佈局的一個要求是右側選單列中的項目位於一行。我透過以下方式實現這一目標：

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

如果我刪除grid-auto-flow屬性，溢出就會停止。但是，這些項目現在堆疊成多行，這不是我想要的。

我還嘗試將 .right-menu 更改為

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

但是，結果和以前一樣。內容溢位列。有沒有辦法不用 JavaScript 就能做到這一點？媒體查詢已經過時，因為這是基於內容的，而不是視口寬度。

.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; }

  Left
  Item: 1
 Item: 2
 Item: 3
 Item: 4
 Item: 5
 Item: 6
 Item: 7
 Item: 8
 Item: 9
 Item: 10
 Item: 11
      
       項目：12
      
      
       項目：13

.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; }