Primitive Class

Lism では、レイアウトを組み立てる小さな積み木として Primitive クラス を提供しています。

l--{name}: レイアウトの構成単位となる Layout Primitive。
a--{name}: レイアウトの最小単位となる Atomic Primitive。

Layout Primitives

レイアウトの構成単位となる Primitive 群です。

| クラス | 概要 | |---|---| | l--box | コンテンツをグループ化するシンプルな Primitive | | l--flow | 子要素間の余白を自動管理する flow-root Primitive | | l--frame | 直下のメディア要素を自身のサイズに合わせて表示 | | l--flex | Flexbox でコンテンツを配置 | | l--cluster | 横方向に並べて自動折り返し | | l--stack | 要素を縦方向に配置 | | l--withSide | サイドとメインの 2 カラムレイアウト | | l--grid | CSS Grid でコンテンツを配置 | | l--tileGrid | 均等な行列グリッド（タイル型レイアウト） | | l--center | 上下左右中央揃えで配置 | | l--columns | ブレイクポイントごとに列数を指定するカラムレイアウト | | l--autoColumns | カラム幅に応じて自動折り返す段組みレイアウト | | l--switchColumns | 複数列と 1 列を自動切り替え |

カラムレイアウト Primitive の使い分けガイド

「カラムを並べる」用途で使える Primitive は複数あります。意図に応じて適切なものを選んでください。

比較表

各 Primitive がどの用途に向いているかの一覧です。

| やりたいこと | columns | autoColumns | switchColumns | withSide | grid | |---|---|---|---|---|---| | 等幅 N 列 | ◯ | ◯ | ✗ | ✗ | △ | | 横並び ↔ 1 列の一括切替 | ◯ | ✗ | ◯ | ✗ | △ | | カラム最小幅で自動折返し | ✗ | ◯ | ✗ | ✗ | △ | | サイド + メイン（非対称 2 カラム） | △ | ✗ | ✗ | ◯ | △ | | BP で列数切替 | ◯ | ✗ | ✗ | ✗ | △ | | 非BPでのレスポンシブ | ✗ | ◯ | ◯ | ◯ | ✗ |

凡例: ◯ 適している / △ 可能だが冗長 / ✗ 不向き

選び方

等幅 N 列、または列数をブレイクポイントで切り替えたい

推奨: l--columns

cols={3} のように固定列数を書けます。cols を配列で渡せば、ブレイクポイントごとの列数も宣言的に書けます。

<Columns cols={[1, 2, 3]} g="20">...</Columns>

l--grid でも gtc="repeat(3, 1fr)" として実現できますが、等幅 N 列や列数切替だけなら l--columns のほうが簡潔です。

カラムが指定の最小幅を下回ったら自動で折り返したい

推奨: l--autoColumns

ブレイクポイントに依存せず、カラムの最小幅基準で auto-fill / auto-fit の挙動を簡潔に書けます。カード一覧、商品リスト、ロゴ並びなどに向いています。

<AutoColumns cols="20rem" g="20">...</AutoColumns>

「横並び」と「縦 1 列」を一括で切り替えたい

推奨: l--switchColumns

自身の利用可能幅が breakSize を下回ったら一気に縦並びに切り替わります。ブレイクポイント / コンテナクエリの設計は不要ですが、breakSize で切り替え幅を指定します。段階的に列数を変えたい場合は l--columns か l--autoColumns を選んでください。

<SwitchColumns breakSize="s" g="20">...</SwitchColumns>

サイド + メイン（非対称 2 カラム）で、コンテンツ幅で自動切替したい

推奨: l--withSide

メイン側が mainW を維持できなくなった時点で自動で縦並びに切り替わります。ブレイクポイント設計が不要です。

<WithSide sideW="240px" mainW="20rem" g="20">
  <Box>Main</Box>
  <Box isSide>Side</Box>
</WithSide>

メディア側を isSide として先に置き、fxd="row-reverse" を併用すれば、横並び時は左右が交互の配置、縦並び時はメディアが上に統一されるレイアウトも作れます。

ブレイクポイントで明示的に切り替えたい場合は l--grid を gta のテンプレ切替で組むことでも同じ見た目を実現できます（l--withSide のほうが宣言的でシンプル）。

行 × 列を指定した固定タイルレイアウト

推奨: l--tileGrid

カラムレイアウトというより、行数も固定したい場合の Grid 派生です。cols / rows で repeat(rows, minmax(0, 1fr)) / repeat(cols, minmax(0, 1fr)) を簡潔に書けます。

<TileGrid cols="3" rows="2" g="10">...</TileGrid>

Grid テンプレートを主目的にした複雑な配置

推奨: l--grid

名前付きエリア、要素の重ね合わせ（ga="1/1"）、subgrid など、Grid テンプレートを中心に組むための汎用 Primitive です。gta / gtc 自体は Property Class として他の Primitive にも指定できますが、Grid テンプレートを主軸にするなら l--grid を選んでください。

Atomic Primitives

レイアウトの最小単位となる Primitive 群です。

| クラス | 概要 | |---|---| | a--decorator | 装飾用の空要素 | | a--divider | コンテンツ間の区切り線 | | a--icon | SVG アイコンを出力 | | a--spacer | 要素間にスペースを確保する空要素 |