使網格容器填充列而不是行
P粉551084295
P粉551084295 2023-08-27 20:59:46
0
1
476
<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>
P粉551084295
P粉551084295

全部回覆(1)
P粉821274260

對於根據需要建立新列且未定義行的垂直流動網格,請考慮使用 CSS 多列佈局範例)。 CSS 網格佈局(至少目前實作 - 等級 1)無法執行此操作任務。問題是這樣的:

在 CSS 網格佈局中,grid-auto-flowgrid-template-rows / grid-template-columns 屬性。

更具體地說,如果同時定義了grid-auto-flow: row(預設)和grid-template-columns,網格項目可以在水平方向上很好地流動,根據需要自動建立新行。這個概念在問題的程式碼中得到了說明。

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}
<div id="container">
  <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>

但是,切換到grid-template-rows後,網格項目會堆疊在單一列中。

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
}
<div id="container">
  <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>

使用 grid-auto-flow: rowgrid-template-rows 不會自動建立列。必須定義grid-template-columns(因此,與grid-auto-flow呈反比關係)。

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}
<div id="container">
  <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>

相反的情況下也有同樣的行為。

定義了grid-auto-flow:columngrid-template-rows後,網格項目可以在垂直方向上很好地流動,並根據需要自動創建新列。

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}
<div id="container">
  <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>

但是,切換到grid-template-columns後,網格項目會堆疊在一行中。 (這是大多數人問的問題,包括在這個問題中。)

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
}
<div id="container">
  <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>

不會自動建立行。這需要定義grid-template-rows。 (這是最常提供的解決方案,但通常會被拒絕,因為佈局的行數是可變的。)

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}
<div id="container">
  <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>

因此,請考慮採用多列佈局解決方案,如上所述。

規範參考:7.7。自動放置:grid-auto-flow 屬性

#
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板