Primitive ってなに？（選び方）

Primitive（プリミティブ）は、ページのレイアウトを組み立てるための、小さな積み木のようなクラスです。名前は l-- か a-- で始まります。

l-- と a-- の違い#

l は layout（レイアウト）、a は atomic（原子のように小さい）の頭文字です。

Layout Primitive の一覧#

Atomic Primitive の一覧#

いっしょに付けてよい組み合わせ#

1つの要素に Primitive を2つ付けるときは、次の決まりがあります。

たとえば「縦に並べて、真ん中にも置きたい」ときは、l--stack と l--center を1つの要素に付けず、箱を2つに分けて入れ子にします。

列を並べるときの選び方#

「列を並べる」ことは、いくつかの Primitive でできます。やりたいことで選びます。

表に名前の無いものは、そのやりたいことには向いていません（名前は l-- を省いて書いています）。

ブレイクポイントは、レイアウトを切り替える画面の幅のことです。

同じ幅の列を並べる・列の数を画面の幅で変える#

l--columns を使います。列の数を決めて書くだけで済み、画面の幅ごとの列の数も指定できます。

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

l--grid に gtc="repeat(3, 1fr)" を付けても同じ形になりますが、列を同じ幅で並べるだけなら l--columns のほうが短く書けます。

列が狭くなったら自動で折り返す#

l--autoColumns を使います。「1列の幅はこれ以上」と決めると、入りきらない列が次の行へ回ります。画面の幅の区切りを考えなくてよいので、カードや商品、ロゴの一覧に向いています。

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

横並びと縦1列を一度に切り替える#

l--switchColumns を使います。使える幅が breakSize で決めた幅より狭くなると、全部が一度に縦並びになります。2列→1列のように段階を踏んで減らしたいときは、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>

画面の幅で決めて切り替えたいなら、l--grid の gta（グリッドの配置図）を切り替えても同じ見た目にできます。ただ、l--withSide のほうが短く書けます。

行と列の数を決めたタイルにする#

l--tileGrid を使います。列だけでなく行の数も決めたいときの、Grid の仲間です。

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

複雑な配置をする#

l--grid を使います。場所に名前を付けて並べる、要素を同じます目に重ねる（ga="1/1"）、subgrid（親のます目を子でも使う）など、Grid の配置図をもとに組むときの基本の Primitive です。gta・gtc はほかの Primitive にも付けられますが、配置図が中心なら l--grid を選びます。

関連するページ#

• l--box（まとめる箱）
• l--flow（文章の間をあける）
• l--stack（縦に並べる）
• l--cluster（横に並べて折り返す）
• l--flex（Flexbox で並べる）
• l--grid（Grid で並べる）
• l--columns（同じ幅の列に分ける）
• l--autoColumns（列の数を自動で決める）
• l--switchColumns（横並びと縦並びを切り替える）
• l--withSide（メインと横の2列）
• l--tileGrid（タイル状に並べる）
• l--center（真ん中に置く）
• l--frame（画像や動画の枠）
• a--divider（区切り線）
• a--spacer（すきまを空ける）
• a--icon（アイコン）
• a--decorator（飾りの要素）