使網格容器填充列而不是行
P粉551084295
2023-08-27 20:59:46
<p>我希望我的網格像這樣垂直填充:</p>
<pre class="brush:php;toolbar:false;">1 4 7
2 5 8
3 6 9
... arbitrary number of additional rows.</pre>
<p>相反,它會這樣水平填充:</p>
<pre class="brush:php;toolbar:false;">1 2 3
4 5 6
7 8 9</pre>
<p><strong>我想要指定網格中的列數,而不是行數。 </strong></p>
<p>這就是我的 div 使用內聯 CSS 樣式的樣子:</p>
<p><br /></p>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div style="display:grid; grid-template-columns:1fr 1fr 1fr;">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div></code></pre>
<p><br /></p>
<p>網格的寬度必須為 3 列,這一點很重要,但我希望項目按列填充,而不是按行填充。這在 CSS 網格中可能嗎?我已通讀此 https://css-tricks.com/snippets/css/complete-guide-grid/ 但沒有看到任何有關順序的內容。 </p>
<p>CSS Flexbox 有 <code>flex-direction</code>,CSS Grid 沒有類似的屬性嗎? </p>
對於根據需要建立新列且未定義行的垂直流動網格,請考慮使用 CSS 多列佈局(範例)。 CSS 網格佈局(至少目前實作 - 等級 1)無法執行此操作任務。問題是這樣的:
在 CSS 網格佈局中,
grid-auto-flow
和grid-template-rows
/grid-template-columns 屬性。
更具體地說,如果同時定義了
grid-auto-flow: row
(預設)和grid-template-columns
,網格項目可以在水平方向上很好地流動,根據需要自動建立新行。這個概念在問題的程式碼中得到了說明。但是,切換到
grid-template-rows
後,網格項目會堆疊在單一列中。使用
grid-auto-flow: row
和grid-template-rows
不會自動建立列。必須定義grid-template-columns
(因此,與grid-auto-flow
呈反比關係)。相反的情況下也有同樣的行為。
定義了
grid-auto-flow:column
和grid-template-rows
後,網格項目可以在垂直方向上很好地流動,並根據需要自動創建新列。但是,切換到
grid-template-columns
後,網格項目會堆疊在一行中。 (這是大多數人問的問題,包括在這個問題中。)不會自動建立行。這需要定義
grid-template-rows
。 (這是最常提供的解決方案,但通常會被拒絕,因為佈局的行數是可變的。)因此,請考慮採用多列佈局解決方案,如上所述。
規範參考:7.7。自動放置:
#grid-auto-flow
屬性