在CSS 網格佈局中重新排序列

在CSS 網格佈局中，有多種技術可以修改列的順序以實現具體佈局。本問題探討了重新排列行動佈局列的可能性，例如將列移到底部，同時在桌面佈局上保持所需的列順序。

解決方案選項：

1. grid-template-areas: 此屬性可讓您在網格內定義命名區域，然後將網格項目指派給這些區域。透過使用命名區域，您可以控制專案的佈局和順序，而無需依賴其在原始程式碼中的初始順序。
2. 基於行的放置： 透過基於行的放置，您可以使用 grid-column-* 屬性指定應放置項目的列。透過將網格項目指派給特定列，您可以控制它們在網格中的順序和位置。
3. order 屬性： order 屬性可讓您定義網格項出現的順序，無論它們在原始碼中的初始排序。透過指定順序值，可以確定網格內項目的視覺順序。
4. grid-auto-flow的dense函數:grid-auto-flow的dense函數優化網格佈局透過自動調整網格項目的位置以盡可能有效地填充可用空間。它可用於實現問題中的移動佈局，其中項目根據需要移動到新行以適應較小的螢幕尺寸。

範例程式碼：

以下範例示範如何使用grid-auto-flow:密集函數來實現問題中所述的行動佈局：

.container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-flow: dense; /* optimizes item placement */
}

使用此程式碼，網格項目將自動重新排列以有效地填充可用空間，從而產生所需的移動佈局。