レイアウト

グリッドレイアウトGrid layout

縦と横の線で区切った格子に、要素を並べる配置の考え方。カードの一覧はほぼこれで作る。

• 配置

横並び（フレックス）Flexbox

要素を一列に並べ、余った幅の配り方を決める配置の考え方。ボタンの並びやヘッダーに使う。

• 配置

最大幅コンテナContainer

本文の横幅に上限を付けて、中央に寄せるための箱。文章が横に伸びすぎるのを防ぐ。

• 配置

余白（ガター）Spacing

要素の内と外に取る空き。外側の空きがマージン、内側の空きがパディング、列と列の間がガター。

• 配置
• 基礎

固定表示Sticky

スクロールしても特定の位置に貼り付いたままにする表示。ヘッダーや表の見出しに使う。

• 配置
• 追従

2カラムTwo column layout

メニューと本文のように、画面を左右2つに分ける配置。辞典やマニュアルの基本形。

• 配置
• 骨格

ブレークポイントBreakpoint

この幅を境にレイアウトを変える、という切り替え点。スマートフォンとパソコンの境目を決める。

• 配置
• 基礎

メーソンリーMasonry

高さの違う要素を、隙間なく積み上げる配置。石積み（masonry）が名前の由来。

• 配置

分割パネルSplit pane

画面を左右（または上下）の2枚のパネルに分け、間の仕切りをつかんで動かすと両側の幅が変わる配置。メールアプリやコードエディターで見かける。

• 骨格
• リサイズ