Weber更新日誌

組件概述

網格是多欄彈性佈局容器，可自訂列數、間距，快速建立多卡片並排的規整排版，適合產品、案例、圖庫等模塊。

適用場景

1、產品列表、服務項目、案例卡片多個模塊整齊並排

2、圖片圖庫、作品集展示

3、價格卡、功能介紹卡片行列排版

4、需要靈活設定不同裝置下欄數的響應式多列場景

不建議使用場景

1、僅需簡單左右兩欄佈局：優先使用【2列】組件

2、非規則、不對稱自由排版：建議使用 Div/2列 彈性佈局自行調整

3、單一區塊大背景：使用【區域】組件

組件使用

1、直接拖拽添加在【容器】組件內使用

2、選中【網格容器】層級，在Class ➡️【網格】可以調整間距與列數

進階設置

1、在網格容器中，可以通過對單個【網格】的跨行數、跨列數單獨設置其在容器中的佔比。
例如：橫向1：2佔比（在Class中將【列數】設置成3，將其中一個網格的【跨列數】設置成2），同理縱向1：2佔比調整【跨行數】

2、在移動端調整排版時，可通過Class中【網格】➡️【排列順序】調整單個網格的順序。（注：設置數字越大，則排序越後。如果排序到不是第一或最後一個，則需要將剩下的網格都要添加排序，才可以排列到其他順序）