Grid

Detail
Basic
Gap
Align
Reverse
Stretch
Variables
Mixins
Sources

Detail

グリッドを構成するレイアウト CSS。

Basic

.grid の直下に .column を複数配置。.column の幅はユーティリティの Flex を付与して設定します。

children 1

children 2

children 3

<div class="grid is-gap-md">
  <div class="column is-0">
    <div>children 1</div>
  </div>
  <div class="column is-0">
    <div>children 2</div>
  </div>
  <div class="column is-0">
    <div>children 3</div>
  </div>
</div>

Selector	Description
`.grid`	グリッドの起点となるラッパー。
`.column`	`.grid` 直下に配置する。グリッドを分割する箱。

Gap

.is-gap-(way)-(value) 形式のモディファイアを .grid に付与すると溝を作れます。(value) を省略した場合は md と同等の値になります。(value) は Meter の値を引き継いでいます。

.is-gap-(value) では上下左右の溝を同時設定します。

children 1

children 2

children 3

children 4

<div class="grid is-gap-md">
  <div class="column is-6">
    <div>children 1</div>
  </div>
  <div class="column is-6">
    <div>children 2</div>
  </div>
  <div class="column is-6">
    <div>children 3</div>
  </div>
  <div class="column is-6">
    <div>children 4</div>
  </div>
</div>

XXS	XS	Small	Medium	Large	XL	XXL
`.is-gap-xxs`	`.is-gap-xs`	`.is-gap-sm`	`is-gap, .is-gap-md`	`.is-gap-lg`	`.is-gap-xl`	`.is-gap-xxl`

Vertical

.is-gap-vertical-(value) では上下方向のみ溝を設定します。Horizontal と同時利用が可能。

children 1

children 2

children 3

<div class="grid is-gap-vertical-md">
  <div class="column is-12">
    <div>children 1</div>
  </div>
  <div class="column is-12">
    <div>children 2</div>
  </div>
  <div class="column is-12">
    <div>children 3</div>
  </div>
</div>

XXS	XS	Small	Medium	Large	XL	XXL
`.is-gap-vertical-xxs`	`.is-gap-vertical-xs`	`.is-gap-vertical-sm`	`is-gap-vertical, .is-gap-vertical-md`	`.is-gap-vertical-lg`	`.is-gap-vertical-xl`	`.is-gap-vertical-xxl`

Horizontal

.is-gap-horizontal-(value) では左右方向のみ溝を設定します。Vertical と同時利用が可能。

children 1

children 2

children 3

<div class="grid is-gap-horizontal-md">
  <div class="column is-0">
    <div>children 1</div>
  </div>
  <div class="column is-0">
    <div>children 2</div>
  </div>
  <div class="column is-0">
    <div>children 3</div>
  </div>
</div>

XXS	XS	Small	Medium	Large	XL	XXL
`.is-gap-horizontal-xxs`	`.is-gap-horizontal-xs`	`.is-gap-horizontal-sm`	`is-gap-horizontal, .is-gap-horizontal-md`	`.is-gap-horizontal-lg`	`.is-gap-horizontal-xl`	`.is-gap-horizontal-xxl`

Align

children 1

children 2

children 3

children 4

<div class="grid is-gap-md">
  <div class="column">
    <div>children 1</div>
  </div>
  <div class="column">
    <div>children 2</div>
  </div>
  <div class="column">
    <div>children 3</div>
  </div>
  <div class="column">
    <div>children 4</div>
  </div>
</div>

Modifier	Description
`.is-baseline`	`.grid` に付与すると `.column` がテキストベースラインで並びます。
`.is-middle`	`.grid` に付与すると `.column` が天地中央寄せで並びます。
`.is-bottom`	`.grid` に付与すると `.column` が下寄せで並びます。
`.is-center`	`.grid` に付与すると `.column` が左右中央寄せで並びます。
`.is-right`	`.grid` に付与すると `.column` が右寄せで並びます。
`.is-between`	`.grid` に付与すると `.column` が等間隔で並びます。
`.is-around`	`.grid` に付与すると `.column` が余白を含めた等間隔で並びます。

Reverse

Active

children 1

children 2

children 3

children 4

<div class="grid is-gap-md is-reverse">
  <div class="column">
    <div>children 1</div>
  </div>
  <div class="column">
    <div>children 2</div>
  </div>
  <div class="column">
    <div>children 3</div>
  </div>
  <div class="column">
    <div>children 4</div>
  </div>
</div>

Modifier	Description
`.is-reverse`	`.grid` に付与すると `.column` が折り返した時に右から並びます。

Stretch

Active

children 1

children 2

children 3

<div class="grid is-gap-md is-stretch">
  <div class="column">
    <div>
      <p>children 1</p>
    </div>
  </div>
  <div class="column">
    <div>
      <p>children 2</p>
      <p>children 2</p>
    </div>
  </div>
  <div class="column">
    <div>
      <p>children 3</p>
      <p>children 3</p>
      <p>children 3</p>
    </div>
  </div>
</div>

Modifier	Description
`.is-stretch`	`.grid` に付与すると `.column` が Flexbox となり直下の高さが揃います。

Variables

Name

Default Value

Compiled Value

Name
$selector-grid
Default Value
.grid
Compiled Value
.grid
Name
$selector-column
Default Value
.column
Compiled Value
.column
Name
$modifier-grid-baseline
Default Value
.is-baseline
Compiled Value
.is-baseline
Name
$modifier-grid-middle
Default Value
.is-middle
Compiled Value
.is-middle
Name
$modifier-grid-bottom
Default Value
.is-bottom
Compiled Value
.is-bottom
Name
$modifier-grid-center
Default Value
.is-center
Compiled Value
.is-center
Name
$modifier-grid-right
Default Value
.is-right
Compiled Value
.is-right
Name
$modifier-grid-between
Default Value
.is-between
Compiled Value
.is-between
Name
$modifier-grid-around
Default Value
.is-around
Compiled Value
.is-around
Name
$modifier-grid-reverse
Default Value
.is-reverse
Compiled Value
.is-reverse
Name
$modifier-grid-stretch
Default Value
.is-stretch
Compiled Value
.is-stretch
Name
$modifier-grid-gap
Default Value
.is-gap
Compiled Value
.is-gap
Name
$modifier-grid-gap-xxl
Default Value
.is-gap-xxl
Compiled Value
.is-gap-xxl
Name
$modifier-grid-gap-xl
Default Value
.is-gap-xl
Compiled Value
.is-gap-xl
Name
$modifier-grid-gap-lg
Default Value
.is-gap-lg
Compiled Value
.is-gap-lg
Name
$modifier-grid-gap-md
Default Value
.is-gap-md
Compiled Value
.is-gap-md
Name
$modifier-grid-gap-sm
Default Value
.is-gap-sm
Compiled Value
.is-gap-sm
Name
$modifier-grid-gap-xs
Default Value
.is-gap-xs
Compiled Value
.is-gap-xs
Name
$modifier-grid-gap-xxs
Default Value
.is-gap-xxs
Compiled Value
.is-gap-xxs
Name
$modifier-grid-gap-vertical
Default Value
.is-gap-vertical
Compiled Value
.is-gap-vertical
Name
$modifier-grid-gap-vertical-xxl
Default Value
.is-gap-vertical-xxl
Compiled Value
.is-gap-vertical-xxl
Name
$modifier-grid-gap-vertical-xl
Default Value
.is-gap-vertical-xl
Compiled Value
.is-gap-vertical-xl
Name
$modifier-grid-gap-vertical-lg
Default Value
.is-gap-vertical-lg
Compiled Value
.is-gap-vertical-lg
Name
$modifier-grid-gap-vertical-md
Default Value
.is-gap-vertical-md
Compiled Value
.is-gap-vertical-md
Name
$modifier-grid-gap-vertical-sm
Default Value
.is-gap-vertical-sm
Compiled Value
.is-gap-vertical-sm
Name
$modifier-grid-gap-vertical-xs
Default Value
.is-gap-vertical-xs
Compiled Value
.is-gap-vertical-xs
Name
$modifier-grid-gap-vertical-xxs
Default Value
.is-gap-vertical-xxs
Compiled Value
.is-gap-vertical-xxs
Name
$modifier-grid-gap-horizontal
Default Value
.is-gap-horizontal
Compiled Value
.is-gap-horizontal
Name
$modifier-grid-gap-horizontal-xxl
Default Value
.is-gap-horizontal-xxl
Compiled Value
.is-gap-horizontal-xxl
Name
$modifier-grid-gap-horizontal-xl
Default Value
.is-gap-horizontal-xl
Compiled Value
.is-gap-horizontal-xl
Name
$modifier-grid-gap-horizontal-lg
Default Value
.is-gap-horizontal-lg
Compiled Value
.is-gap-horizontal-lg
Name
$modifier-grid-gap-horizontal-md
Default Value
.is-gap-horizontal-md
Compiled Value
.is-gap-horizontal-md
Name
$modifier-grid-gap-horizontal-sm
Default Value
.is-gap-horizontal-sm
Compiled Value
.is-gap-horizontal-sm
Name
$modifier-grid-gap-horizontal-xs
Default Value
.is-gap-horizontal-xs
Compiled Value
.is-gap-horizontal-xs
Name
$modifier-grid-gap-horizontal-xxs
Default Value
.is-gap-horizontal-xxs
Compiled Value
.is-gap-horizontal-xxs
Name
$gap-size-xxl
Default Value
$meter-xxl
Compiled Value
28px
Name
$gap-size-xl
Default Value
$meter-xl
Compiled Value
24px
Name
$gap-size-lg
Default Value
$meter-lg
Compiled Value
20px
Name
$gap-size-md
Default Value
$meter-md
Compiled Value
16px
Name
$gap-size-sm
Default Value
$meter-sm
Compiled Value
12px
Name
$gap-size-xs
Default Value
$meter-xs
Compiled Value
8px
Name
$gap-size-xxs
Default Value
$meter-xxs
Compiled Value
4px

Mixins

musubii-style-grid()
musubii-style-grid-baseline()
musubii-style-grid-middle()
musubii-style-grid-bottom()
musubii-style-grid-center()
musubii-style-grid-right()
musubii-style-grid-between()
musubii-style-grid-around()
musubii-style-grid-reverse()
musubii-style-grid-stretch()
musubii-style-grid-gap($gap-size)
musubii-style-grid-gap-vertical($gap-size)
musubii-style-grid-gap-horizontal($gap-size)

Sources

Document: Grid / MUSUBii - GitHub Repository Source (MDX)
SCSS: Grid / MUSUBii - GitHub Repository Source (SCSS)

Grid

#Table of Contents

#Detail

#Basic

#Gap

#Vertical

#Horizontal

#Align

#Reverse

#Stretch

#Variables

#Mixins

#Sources

Table of Contents

Detail

Basic

Gap

Vertical

Horizontal

Align

Reverse

Stretch

Variables

Mixins

Sources