kikikan/backend/resources/sass/scss/object/component/_layout.scss

 /* #Layout
   -------------------------------------------------------------------------- */
/*doc
---
title: layout
name: layout
categories: [component]
---

汎用的なレイアウトオブジェクトです。`width`の変更はUtilityレイヤーで指定します。

Modifierは以下のとおりです。

* ガターの追加 `--small`, `--medium`, `--large`
* text-alignの変更 `--middle`, `--bottom`
* 配置を反転 `--reverse`
* `.c-layout__item`のカラム幅をまとめて指定 `--colx`, `--colxandx`

```block
<div class="c-wrapper">
  <div class="c-layout c-layout--medium" style="margin-bottom:1rem;">
    <div class="c-layout__item u-8of12-md"><div style="background-color:lightblue;">c-layout__item u-8of12-md</div></div>
    <div class="c-layout__item u-4of12-md"><div style="background-color:lightblue;">c-layout__item u-4of12-md</div></div>
  </div>

  <div class="c-layout c-layout--reverse c-layout--medium" style="margin-bottom:1rem;">
    <div class="c-layout__item u-8of12-md"><div style="background-color:lightblue;">c-layout--rev c-layout__item u-8of12-md</div></div>
    <div class="c-layout__item u-4of12-md"><div style="background-color:lightblue;">c-layout--rev c-layout__item u-4of12-md</div></div>
  </div>

  <div class="c-layout c-layout--center c-layout--medium" style="margin-bottom:1rem;">
    <div class="c-layout__item u-8of12-md"><div style="background-color:lightblue;">c-layout--center c-layout__item u-8of12-md</div></div>
  </div>

  <div class="c-layout c-layout--medium c-layout--col2-sm c-layout--col3-md" style="margin-bottom:1rem;">
    <div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item c-layout--col2-sm c-layout--col3-md</div></div>
    <div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item c-layout--col2-sm c-layout--col3-md</div></div>
    <div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item c-layout--col2-sm c-layout--col3-md</div></div>
  </div>

  <div class="c-layout c-layout--col4and8" style="margin-bottom:1rem;">
    <div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item u-8of12-md</div></div>
    <div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item u-4of12-md</div></div>
  </div>
</div>
```
*/
$_layout-gutter: $_white-space !default;
$_layout-gutter-small: math.div($_layout-gutter, 2) !default;
$_layout-gutter-large: ($_layout-gutter * 2) !default;

.c-layout {
  @include _c-layout();
}

.c-layout__item {
  @include _c-layout__item();
}

/**
 * ガターを3つのパリエーションから選択します。
 */
.c-layout--small {
  margin-left: -$_layout-gutter-small;
  > .c-layout__item {
    padding-left: $_layout-gutter-small;
  }
}

.c-layout--medium {
  margin-left: -$_layout-gutter;
  > .c-layout__item {
    padding-left: $_layout-gutter;
  }
}

.c-layout--large {
  margin-left: -$_layout-gutter-large;
  > .c-layout__item {
    padding-left: $_layout-gutter-large;
  }
}

/**
 * 垂直位置を2つのパリエーションから選択します（デフォルトは`top`）。
 */
.c-layout--middle {
  > .c-layout__item {
    vertical-align: middle;
  }
}

.c-layout--bottom {
  > .c-layout__item {
    vertical-align: bottom;
  }
}

/**
 * 要素を中央配置にします（デフォルトは`left`）。
 */
.c-layout--center {
  text-align: center;
  > .c-layout__item {
    text-align: left;
  }
}

/**
 * 要素を右端寄せにします（デフォルトは`left`）。
 */
.c-layout--right {
  text-align: right;
  > .c-layout__item {
    text-align: left;
  }
}

/**
 * `.c-layout__item`のカラム数をまとめて指定します。
 */
@include _responsive('.c-layout--col2') {
  > .c-layout__item {
    width: percentage(math.div(1, 2));
  }
}

@include _responsive('.c-layout--col3') {
  > .c-layout__item {
    width: percentage(math.div(1, 3));
  }
}

@include _responsive('.c-layout--col4') {
  > .c-layout__item {
    width: percentage(math.div(1, 4));
  }
}

@include _responsive('.c-layout--col2and10') {
  > .c-layout__item:nth-child(odd) {
    width: percentage(math.div(2, 12));
  }
  > .c-layout__item:nth-child(even) {
    width: percentage(math.div(1, 12));
  }
}

@include _responsive('.c-layout--col3and9') {
  > .c-layout__item:nth-child(odd) {
    width: percentage(math.div(3, 12));
  }
  > .c-layout__item:nth-child(even) {
    width: percentage(math.div(9, 12));
  }
}

@include _responsive('.c-layout--col4and8') {
  > .c-layout__item:nth-child(odd) {
    width: percentage(math.div(4, 12));
  }
  > .c-layout__item:nth-child(even) {
    width: percentage(math.div(8, 12));
  }
}

@include _responsive('.c-layout--col5and7') {
  > .c-layout__item:nth-child(odd) {
    width: percentage(math.div(5, 12));
  }
  > .c-layout__item:nth-child(even) {
    width: percentage(math.div(7, 12));
  }
}

/**
 * 要素を右から配置させます（HTMLの記述を反転させた状態でレイアウトされます）。
 */
@include _responsive('.c-layout--reverse') {
  text-align: left;
  direction: rtl;
  > .c-layout__item {
    text-align: left;
    direction: ltr;
  }
}