如何重新排列 CSS 網格佈局中的列？

更改CSS 網格中的列順序

在CSS 網格中，您可以透過使用網格指定列數和行數來定義網格的佈局- template-columns 和grid-template-rows 屬性。然而，重新排列這些列的順序可能是一個挑戰。

解決方案：使用密集關鍵字的網格自動流

雖然有多種方法可以重新排列網格項目，使用帶有grid-auto-flow屬性的密集關鍵字提供了一個簡單而有效的解決方案：

<code class="css">grid-auto-flow: dense;</code>

dense 關鍵字告訴瀏覽器自動用網格項填充空網格單元，移動它們以填充

應用到範例

透過將密集關鍵字新增至現有網格類，列將在行動佈局上自動重新排列以符合所需的順序：

<code class="css">.my-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 15% 1fr 25%;
  grid-template-rows: 1fr; /* For as many rows as you need */
  grid-gap: 10px;
  border: 2px solid #222;
  box-sizing: border-box;
}</code>

結果：

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

此解決方案提供了一種方便而強大的方法來更改列順序，而無需借助預處理器.

以上是如何重新排列 CSS 網格佈局中的列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！