Re-ordering Grid Items

grid 的表格排列順序是由左上開始向右遞增，如下表的形式


1	2	3	4
5	6	7	8
9	10	11	12

假如想調整位置，先前提過的設定可以直接針對 start 與 end 去設定，但是若是想要安排順序的話，使用 start 與 end 設定就必須針對每個表格進行計算，這樣的設定太過麻煩，有更好的方式可以進行處理，就是 order ，以下使用範例來說明：

首先原本樣式如此， logo 後是 nav 接著是 content ，用表格排列則是


logo	nav	content

<div class="container">
    <div class="item logo">LOGO</div>
    <div class="item nav">NAV</div>
    <div class="item content">
        <p>I'm the Content!</p>
    </div>
</div>

當使用 order 排列，可以重新指定順序，需要注意的是 order 的預設值是 0 ，所以設定可以是由 0 開始，或是自訂

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(10, 1fr);
}

.logo {
    grid-column: span 2;
    order: 2;
}

.nav {
    grid-column: span 8;
    order: 1;
}

.content {
    grid-column: 1/-1;
    order: 3;
}


nav	logo	content

線上展示

筆記與備註事項

order

預設的 order 值是 0

CSS order 屬性規定了彈性容器中的可伸縮項目在佈局時的順序。元素按照 order 屬性的值的增序進行佈局。擁有相同 order 屬性值的元素按照它們在源代碼中出現的順序進行佈局。
資料來源 - MDN

ShunNien's Blog

CSS Grid 筆記 18-Re-Ordering Grid Items

Re-ordering Grid Items

線上展示

筆記與備註事項

order

參考資料