重新排列CSS 網格列

簡介

CSS 網格為Web 內容提供了靈活的佈局系統，包括控制內容的順序和位置的能力列。這個問題深入探討了更改 CSS 網格中的列順序。

Grid-template-areas 屬性

重新排列網格列的一種方法是透過 grid-template-areas 屬性。這允許您定義網格內的特定區域並將列指派給這些區域。例如：

.my-grid {
  grid-template-areas:
    "col3 col1"
    "col3 col2";
}

這會將 col3 元素移到行的開頭，然後是 col1 元素。

基於行的放置

您也可以使用基於行的放置控制列順序。這涉及沿著網格線一個接一個地放置網格項，並透過「grid-column-start」和「grid-column-end」屬性確定開始和結束位置。

例如，要定位col1 元素之後的 col3 元素：

.col3 {
  grid-column-start: 2;
}

Order 屬性

order 屬性設定軌道中網格項目的順序。小於 0 的值將項目放置在軌道開始之前，而大於 0 的值將其放置在軌道結束之後。

要將 col3 元素移到第一個位置：

.col3 {
  order: -1;
}

密集函數

grid-auto-flow屬性的密集函數也可以用來重新排列網格列。它從網格容器的開頭開始對齊可用空間中的項目，跳過任何空網格單元。

要將 col3 元素移到第二行的開頭：

.my-grid {
  grid-auto-flow: dense 1fr;
}
.col3 {
  grid-column: 3;
  grid-row: 2;
}

透過實作這些技術，您可以動態地重新排列網格列，以滿足不同螢幕尺寸或裝置方向上所需的佈局要求。