レイアウトグリッド／Layout grid

各要素はグリッドの線のいずれかに沿うように配置します。
高さに関するグリッドは、ページコンテンツの要素間のマージンのみを定義し、各コンポーネントの高さ自体を規定するものではありません。

レイアウトグリッド（Column：横方向）

lg(Large) : 1281px- (12columns)

md(Medium) : 769px-1280px(12columns)

sm(Small) : -768px(8columns)

縦方向の基本要素間マージン

基本コンポーネント同士の上下方向のマージンはlg-md時では共通、sm時で縮小した値を設定します。
下記の黒い枠線がコンポーネントが配置されるエリアです。基本コンポーネント同士の間の他に、基本コンポーネントとフッター間には別のマージンが設定されています。また、コンポーネント内にパディングが含まれている場合もありますが、下記のレイアウトルールは変わりません。

lg-md：基本コンポーネント同士の間隔（—semantic-space-inner-ll）32px
sm：基本コンポーネント同士の間隔（—semantic-space-inner-l）24px
lg-md：基本コンポーネントとフッターの間隔（—semantic-space-outer-m）96px
sm：基本コンポーネントとフッターの間隔（—semantic-space-outer-sss）64px

lg-md

sm