網格

使用 UIGrid 與 UIGridItem 建立響應式欄位配置。

UIGrid / UIGridItem

響應式網格

手機版整行，平板兩欄，桌面四欄。未設定的斷點會維持整行佔滿。

第一個網格項目

第二個網格項目

第三個網格項目

第四個網格項目

查看使用方式

<UIGrid>
  <UIGridItem sm="12" md="6" lg="3">
    這是一個網格項目
  </UIGridItem>
</UIGrid>

UIGrid

UIGrid 預設為 12 欄，也可以指定父層欄數；UIGridItem 未設定尺寸時會整行佔滿。

未設定尺寸，整行佔滿

4 欄中的 2 欄

查看使用方式

<UIGrid col="4">
  <UIGridItem>整行佔滿</UIGridItem>
  <UIGridItem sm="2">佔 2 欄</UIGridItem>
</UIGrid>