グリッドシステムの基本概念

グリッドレイアウトは、多様な画面解像度やデバイスサイズに対応するための標準的な配置手法です。コンテナを等幅の列に分割することで、UI部品の配置基準が構造化され、マルチデバイス環境でのデザイン一貫性を担保します。ArkUIでは、親コンテナとなるGridRowと子セルを定義するGridColを連携させることで、柔軟なレスポンシブ構造を構築できます。

GridRowコンテナの制御パラメータ

ブレークポイントの定義

画面幅の遷移をトリガーにレイアウトを切り替える基準をブレークポイントと呼びます。ArkUIはxsからxxlまでの6段階をデフォルトで提供しており、開発者は閾値をカスタマイズ可能です。参照基準には通常BreakpointsReference.WindowSizeを指定します。

独自閾値と動的列数設定の組み合わせ例：

@Entry
@Component
struct BreakpointGridSample {
  private themeColors: string[] = ['#FF5252', '#FF9800', '#FFEB3B', '#4CAF50', '#E91E63', '#9C27B0', '#2196F3', '#607D8B']

  build() {
    GridRow({
      breakpoints: {
        value: ['320vp', '480vp', '720vp', '960vp', '1200vp'],
        reference: BreakpointsReference.WindowSize
      }
    }) {
      ForEach(this.themeColors, (hex, idx) => {
        GridCol({
          span: {
            xs: 4, sm: 3, md: 3, lg: 2, xl: 2, xxl: 1
          }
        }) {
          Column() {
            Text(`No.${idx + 1}`).fontSize(16).fontColor('#FFF')
            Text('Card').fontSize(12).opacity(0.85)
          }
          .width('100%').height('70vp')
          .justifyContent(FlexAlign.Center)
        }
        .backgroundColor(hex)
        .borderRadius(12)
      })
    }
  }
}

総列数（Columns）の管理

グリッドの総分割数はcolumnsで制御します。デフォルトは12ですが、オブジェクト形式でブレークポイントごとの列数を個別に定義可能です。未設定の範囲は直近の小さいブレークポイントの値が引き継がれ、それより小さい領域はデフォルト12が適用されます。

GridRow({ 
  columns: { sm: 6, md: 10 },
  breakpoints: { value: ['400vp', '800vp'] }
}) {
  // 実装...
}

配置方向と要素間隔

directionプロパティで描画順序を変更できます。GridRowDirection.Row（左→右）が初期値で、GridRowDirection.RowReverseを指定すると逆順に配置されます。隣接するセル間の余白はgutterで調整し、水平軸（x）と垂直軸（y）を独立して設定できます。

GridRow({
  direction: GridRowDirection.RowReverse,
  gutter: { x: 16, y: 24 },
  columns: 8
}) {
  ForEach(Array.from({ length: 5 }), (_, i) => {
    GridCol({ span: { sm: 4, md: 2 } }) {
      Row().width('100%').height('80vp').backgroundColor('#E3F2FD').borderRadius(6)
    }
  })
}

GridColの詳細制御

GridColは個々のセルの振る舞いを定義し、主にspan（幅）、offset（開始位置のオフセット）、order（描画順序）の3属性を操作します。いずれも単一数値またはブレークポイント対応オブジェクトとして渡せます。

占有列数（span）

spanは要素が横方向に占める列数を決定します。コンテナ幅を均等に分割する場合や、特定要素を強調表示する場合に利用します。

// 全画面で固定3列占有
GridCol({ span: 3 }) { /* 子要素 */ }

// デバイス幅に応じて段階的に拡張
GridCol({ span: { xs: 12, sm: 6, md: 4, lg: 3 } }) { /* 子要素 */ }

// 修飾子チェーンによる後付け設定
GridCol().span({ xs: 12, md: 4 }) { /* 子要素 */ }

オフセット（offset）と表示順序（order）

offsetはセルの開始位置を右方向にずらす列数を指定し、非対称レイアウトや中央寄せの実装に利用されます。orderはDOM上の記述位置とは無関係に、レンダリングされる優先度を数値で制御します。値が小さいほど先行して描画されます。

@Entry
@Component
struct LayoutControlDemo {
  build() {
    GridRow({ columns: 12, gutter: 10 }) {
      GridCol({ span: { md: 4 } }) {
        Column().width('100%').height('60vp').backgroundColor('#F6C6C6')
      }
      GridCol({ span: { md: 4 }, offset: { md: 6 } }) {
        Column().width('100%').height('60vp').backgroundColor('#A7C7E7')
      }
      // orderにより、記述順よりも手前に描画される
      GridCol({ span: { md: 4 }, order: { md: 1 } }) {
        Column().width('100%').height('60vp').backgroundColor('#B3F5B3')
      }
    }
  }
}